Definition
CSS pseudo-elements are selectors used to style specified sub-parts of an element (like the first letter) or to insert generated content (::before, ::after) into the DOM purely via CSS.
Why It Matters
They allow for advanced typographical and decorative styling without altering the underlying semantic HTML structure, keeping markup clean and focused on content rather than presentation.
Core Concepts
- Typographical Selection:
::first-letter,::first-lineallow styling of specific text blocks automatically. - Generated Content (
::before,::after): Used in conjunction with thecontentproperty to inject decorative elements, icons, or visual structure (like the clearfix hack). - Syntax: Pseudo-elements use a double colon (
::) to distinguish them from pseudo-classes, though modern browsers support single colons for backward compatibility.
p::first-line {
font-weight: bold;
text-transform: uppercase;
}
.button::before {
content: "★ ";
color: gold;
}