Syntax
element::before { content: ""; }Examples
::before and ::after
Inserting decorative content without extra markup - always requires the content property.
.required-label::after {
content: " *";
color: red;
}
.quote::before {
content: "\201C"; /* opening curly quote character */
font-size: 2em;
}::first-letter and ::first-line
Styling just the beginning of a text block, like a drop cap.
.article p::first-letter {
font-size: 3em;
float: left;
line-height: 0.8;
margin-right: 4px;
}::placeholder and ::selection
Styling input placeholder text and user text selection highlighting.
input::placeholder {
color: #9ca3af;
font-style: italic;
}
::selection {
background: #fef08a;
color: #000;
}Parameters and values
- ::before / ::after (pseudo-element): Inserts generated content, requires the content property
- ::first-line / ::first-letter (pseudo-element): Targets the first line or letter of text
- ::placeholder (pseudo-element): Styles an input's placeholder text
- ::selection (pseudo-element): Styles user-highlighted text
Best practices
- Always include a content property (even an empty string) on ::before/::after - without it, the pseudo-element does not render at all
- Use ::before/::after for purely decorative content, not essential information - it is not reliably accessible to all assistive technology
- Use double colons (::) for true pseudo-elements per the modern spec, though single colon (:before) still works for legacy compatibility
- Use ::selection sparingly and ensure sufficient contrast - it affects how your content looks when users highlight text to copy it
At a glance
- Purpose
- Presentation and layout
- File extension
- .css
- Runs in
- Web browsers
- Usually used with
- HTML and JavaScript
Specifications & further reading
Related CSS documentation
Interactive Pseudo-classes
These pseudo-classes style elements based on user interaction state. :hover applies while the pointer is over an element, :focus while it has keyboard focus, :active during the moment of being clicked/pressed, and :visited for links the user has already navigated to.:focus-visible and :focus-within
:focus-visible applies only when the browser determines focus should be visibly indicated - typically keyboard navigation, not a mouse click - solving the old complaint of unwanted focus rings on click. :focus-within applies to a parent element when any descendant inside it has focus, useful for highlighting an entire form group when one of its fields is active.Form State Pseudo-classes
CSS can style form elements based on their validation and interaction state without any JavaScript. :checked applies to checked checkboxes/radios, :disabled to disabled fields, :required and :optional based on the required attribute, and :valid/:invalid based on constraint validation results.Structural Pseudo-classes: nth-child()
Structural pseudo-classes select elements based on their position among siblings, without needing extra classes. :first-child and :last-child match the first/last element. :nth-child() accepts a formula (like 2n for even, 2n+1 for odd) or a simple number, letting you target patterns like every third item or striped table rows.
These pseudo-classes style elements based on user interaction state. :hover applies while the pointer is over an element, :focus while it has keyboard focus, :active during the moment of being clicked/pressed, and :visited for links the user has already navigated to.:focus-visible and :focus-within
:focus-visible applies only when the browser determines focus should be visibly indicated - typically keyboard navigation, not a mouse click - solving the old complaint of unwanted focus rings on click. :focus-within applies to a parent element when any descendant inside it has focus, useful for highlighting an entire form group when one of its fields is active.Form State Pseudo-classes
CSS can style form elements based on their validation and interaction state without any JavaScript. :checked applies to checked checkboxes/radios, :disabled to disabled fields, :required and :optional based on the required attribute, and :valid/:invalid based on constraint validation results.Structural Pseudo-classes: nth-child()
Structural pseudo-classes select elements based on their position among siblings, without needing extra classes. :first-child and :last-child match the first/last element. :nth-child() accepts a formula (like 2n for even, 2n+1 for odd) or a simple number, letting you target patterns like every third item or striped table rows.