CSS · Chapter 30 of 44
CSS Pseudo-Elements
Pseudo-elements let you style a specific part of an element, such as ::before and ::after (to insert generated content), ::first-line, and ::first-letter.
Unlike pseudo-classes (single colon, state-based), pseudo-elements use a double colon and target a sub-part of an element.
Syntax
element::before {
content: "...";
}::before and ::after
These insert generated content before or after an element's actual content, controlled by the content property. Widely used for icons and decorative elements.
::first-line and ::first-letter
::first-line styles the first rendered line of a block; ::first-letter styles just the first character, common for drop caps.
Example 1 (css)
.quote::before {
content: "\201C";
font-size: 2em;
color: gray;
}Output
A large gray opening quotation mark appears before the quote text::before generates content that isn't in the HTML, purely for visual decoration.
Key points
- Pseudo-elements use double colons (::).
- ::before and ::after insert generated content via the content property.
- ::first-line and ::first-letter target text sub-parts.
- Pseudo-elements are often used for decorative or icon content.
💡 Note: content: ""; is required for ::before/::after to render, even if empty.