Assignments Of Class 23: Pseudo-elements
Assignment 1: Adding a Decorative Icon Before Text
Objective: Use the ::before pseudo-element to add an icon before each paragraph.
Task: Create a paragraph and add a decorative icon (such as a star) before each paragraph using the ::before pseudo-element.
Solution:
1. HTML Structure:
html
CopyEdit
<p>This is an example paragraph with a decorative icon before it.</p>
2. CSS Styling:
css
CopyEdit
p::before {
content: "★ "; /* Star icon */
font-size: 24px;
color: gold;
}
Explanation:
- The content property inserts the star symbol (★) before the paragraph text.
- The font-size and color properties style the star.
Assignment 2: Adding a Decorative Icon After Text
Objective: Use the ::after pseudo-element to add an icon after a paragraph.
Task: Create a paragraph and add a checkmark icon after it using the ::after pseudo-element.
Solution:
1. HTML Structure:
html
CopyEdit
<p>This is an example paragraph with a checkmark after it.</p>
2. CSS Styling:
css
CopyEdit
p::after {
content: " ✔"; /* Checkmark icon */
font-size: 24px;
color: green;
}
Explanation:
- The content property inserts a checkmark symbol (✔) after the paragraph text.
- The font-size and color properties are applied to style the checkmark.
Assignment 3: Creating a Drop Cap with ::first-letter
Objective: Use the ::first-letter pseudo-element to create a drop cap effect for the first letter of a paragraph.
Task: Style the first letter of a paragraph with a larger font size and bold text.
Solution:
1. HTML Structure:
html
CopyEdit
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
2. CSS Styling:
css
CopyEdit
p::first-letter {
font-size: 3em;
font-weight: bold;
color: red;
}
Explanation:
- The ::first-letter pseudo-element targets only the first letter of the paragraph.
- The font-size, font-weight, and color properties are used to style it as a drop cap.
Assignment 4: Custom Bullet Points Using ::before
Objective: Style the list items with custom bullet points using the ::before pseudo-element.
Task: Change the default list item markers to custom symbols (e.g., a plus sign).
Solution:
1. HTML Structure:
html
CopyEdit
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
2. CSS Styling:
css
CopyEdit
li::before {
content: "+ "; /* Custom bullet */
color: blue;
font-size: 20px;
}
Explanation:
- The ::before pseudo-element is used to add a custom bullet symbol (+) before each list item.
- The color and font-size properties style the bullet.
Assignment 5: Creating a Triangle Using ::before
Objective: Create a triangle shape using the ::before pseudo-element.
Task: Create a triangle shape that appears before an element.
Solution:
1. HTML Structure:
html
CopyEdit
<div class="triangle"></div>
2. CSS Styling:
css
CopyEdit
.triangle::before {
content: "";
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 60px solid red;
}
Explanation:
- The ::before pseudo-element is used to create the triangle shape.
- By setting width and height to 0, and using border properties, we can manipulate the appearance of the triangle.
Assignment 6: Creating a Circle Using ::after
Objective: Create a circle shape using the ::after pseudo-element.
Task: Create a circle shape that appears after an element.
Solution:
1. HTML Structure:
html
CopyEdit
<div class="circle"></div>
2. CSS Styling:
css
CopyEdit
.circle::after {
content: "";
width: 100px;
height: 100px;
background-color: blue;
border-radius: 50%;
}
Explanation:
- The ::after pseudo-element is used to create the circle shape.
- The border-radius property with a value of 50% transforms the square into a circle.
Assignment 7: Adding Quotation Marks Using ::before and ::after
Objective: Add quotation marks around a blockquote element using ::before and ::after.
Task: Create a blockquote and add opening and closing quotation marks around it.
Solution:
1. HTML Structure:
html
CopyEdit
<blockquote>This is a quoted text.</blockquote>
2. CSS Styling:
css
CopyEdit
blockquote::before {
content: "“"; /* Opening quote */
font-size: 2em;
color: gray;
}
blockquote::after {
content: "”"; /* Closing quote */
font-size: 2em;
color: gray;
}
Explanation:
- The ::before and ::after pseudo-elements are used to insert the opening and closing quotation marks around the blockquote.
- The content property defines the quotation marks, and the font-size and color properties are used for styling.
Assignment 8: Inserting Decorative Element Using ::before
Objective: Add a decorative border to the top of each paragraph using the ::before pseudo-element.
Task: Add a decorative line (border) at the top of each paragraph before the text.
Solution:
1. HTML Structure:
html
CopyEdit
<p>This is a styled paragraph with a decorative border above.</p>
2. CSS Styling:
css
CopyEdit
p::before {
content: "";
display: block;
width: 100%;
height: 2px;
background-color: #333;
margin-bottom: 10px;
}
Explanation:
- The ::before pseudo-element adds an empty block before the paragraph text.
- The width is set to 100%, and height is set to 2px to create a horizontal line (border) above the text.
- The background-color property defines the color of the border, and margin-bottom separates the line from the paragraph text.
Assignment 9: Highlighting First Letter Using ::first-letter
Objective: Highlight the first letter of each paragraph by making it large and bold.
Task: Style the first letter of each paragraph by making it larger and bold.
Solution:
1. HTML Structure:
html
CopyEdit
<p>Learning CSS pseudo-elements is fun!</p>
2. CSS Styling:
css
CopyEdit
p::first-letter {
font-size: 2em;
font-weight: bold;
color: purple;
}
Explanation:
- The ::first-letter pseudo-element selects the first letter of the paragraph and applies the styles.
- The font-size, font-weight, and color properties emphasize the first letter of the paragraph.
Assignment 10: Creating a Custom Badge Using ::after
Objective: Create a custom badge that appears after an element using the ::after pseudo-element.
Task: Add a badge (such as "New") after an element using the ::after pseudo-element.
Solution:
1. HTML Structure:
html
CopyEdit
<p class="product">This is a new product!</p>
2. CSS Styling:
css
CopyEdit
.product::after {
content: " New";
background-color: red;
color: white;
font-size: 12px;
padding: 2px 5px;
border-radius: 10px;
margin-left: 10px;
}
Explanation:
- The ::after pseudo-element adds the "New" badge after the paragraph text.
- The background-color, color, font-size, and padding properties style the badge, and the border-radius gives it rounded corners.
No comments:
Post a Comment