Pseudo-elements
Pseudo-elements style a specific part of an element — its first line, its first letter, the bullet of a list item, selected text — or insert decorative content before or after it. They're written with a double colon, like ::before.
::before and ::after
::before and ::after create a virtual child at the start or end of an element. They need the content property to appear — even if it's empty: content: "". They're perfect for decorative icons, quotation marks, badges and shapes.
Decorative shapes
An empty content plus sizing and positioning creates purely visual elements — underlines, arrows, overlays — without cluttering the HTML.
content may be read by screen readers but can't be selected or translated reliably. Use pseudo-elements for decoration, never for important information. You can give generated content alternative text after a slash: content: "★" / ""; hides a decorative star from screen readers.Using attribute values and counters
attr() inserts an attribute's value — great for print stylesheets that show link URLs. CSS counters number things automatically.
::first-letter and ::first-line
A classic drop cap. ::first-line adapts automatically as the window resizes.
::marker
::selection and ::placeholder
Other pseudo-elements
| Pseudo-element | Styles |
|---|---|
::backdrop | The overlay behind modal dialogs and full-screen elements |
::file-selector-button | The button inside <input type="file"> |
::cue | Video captions |
::details-content | The expandable part of <details> |
::view-transition-* | Animated page transitions |
Single or double colon?
Modern CSS uses one colon for pseudo-classes (:hover) and two for pseudo-elements (::before). Older code sometimes writes :before with one colon; browsers still accept that for the four original pseudo-elements, but new code should use two.