CSS Pseudo-Elements
A CSS pseudo-element is a keyword that can be added to a selector, to style a specific part of an element.
Some common use for pseudo-elements:
- Style the first letter or first line, of an element
- Insert content before or after an element
- Style the markers of list items
- Style the user-selected portion of an element
- Style the viewbox behind a dialog box
Syntax
Pseudo-elements are denoted by a double colon (::) followed by the pseudo-element name:
selector::pseudo-element-name {
CSS properties
}
Text Pseudo-elements
Text pseudo-elements style specific parts of text content:
::first-line- Style the first line of text::first-letter- Style the first letter of text
Content Pseudo-elements
Content pseudo-elements insert or style generated content:
::before- Insert content before an element::after- Insert content after an element::marker- Style list item markers::selection- Style user-selected text::backdrop- Style dialog backdrop
CSS Pseudo-elements Reference
Note: For a complete list of all CSS Pseudo-elements, visit our CSS Pseudo-elements Reference.
