8.1 Types of Pseudo-elements
Pseudo-elements in CSS let you style specific parts of elements, like the first letter, first line, or add content before or after an element. They provide extra styling options without needing to change the HTML structure. Pseudo-elements are marked with double colons (::).
Main pseudo-elements:
::before::after::first-letter::first-line
8.2 Pseudo-element ::before
The ::before pseudo-element adds content before the content of an element. It's often used to add decorative elements, icons, or additional text.
Syntax:
selector::before {
content: "" | "text" | url() | counter | attr();
property: value;
}
The content field specifies the HTML code that needs to be added.
/* Adds an arrow before every list item */
li::before {
content: "→ ";
color: red;
}
<ul>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
</ul>
8.3 Pseudo-element ::after
The ::after pseudo-element adds content after the content of an element. It's often used to add decorative elements, icons, or additional text.
Syntax:
selector::after {
content: "" | "text" | url() | counter | attr();
property: value;
}
The content field specifies the HTML code that needs to be added.
/* Adds a dot after every list item */
li::after {
content: " •";
color: blue;
}
<ul>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
</ul>
8.4 Pseudo-element ::first-letter
The ::first-letter pseudo-element is applied to the first letter of an element. It's often used to create decorative initial letters in paragraphs.
Syntax:
selector::first-letter {
content: "" | "text" | url() | counter | attr();
property: value;
}
Example:
/* Enlarges and changes the color of the first letter of each paragraph */
p::first-letter {
font-size: 2em;
color: green;
}
<p>This is a paragraph example.</p>
<p>Here's another paragraph example.</p>
8.5 Pseudo-element ::first-line
The ::first-line pseudo-element is applied to the first line of an element. It's often used to style the first line of a paragraph.
Syntax:
selector::first-line {
content: "" | "text" | url() | counter | attr();
property: value;
}
Example:
/* Changes the color and makes the first line of each paragraph bold */
p::first-line {
color: navy;
font-weight: bold;
}
<p>
This is a paragraph text example that contains enough text to break into multiple lines, demonstrating how the ::first-line pseudo-element works. The first line of each paragraph will be highlighted in bold and navy color to catch the reader's attention. This effect is achieved with the CSS rule we defined above.
</p>
<p>
Notice that the styling only applies to the first line regardless of its length. The rest of the text in the paragraph retains its original style. This can be useful for emphasizing key points or creating visual rhythm in the text.
</p>
GO TO FULL VERSION