Pseudo-Elements
Pseudo-elements style conceptual parts of an element rather than actual DOM elements. Common examples include ::before, ::after, ::first-letter, ::first-line, ::selection, and ::marker.
Generated content using ::before and ::after should not be used as the only place to store essential information because generated content may not provide the same semantic guarantees as real HTML content.
Pseudo-Elements Inside an Element
Pseudo-Element Decoration
.badge::before {
content: "";
display: inline-block;
width: 0.5rem;
height: 0.5rem;
margin-inline-end: 0.5rem;
border-radius: 50%;
background: currentColor;
}💡 The pseudo-element adds a decorative dot without requiring another HTML element.
Key Takeaways
- Pseudo-elements represent conceptual parts of an element.
- Do not hide critical semantic content exclusively inside generated content.
Knowledge Check
Which syntax represents a pseudo-element?