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