CSS Pseudo-Elements
To style one specific part of an element, add a keyword called a CSS pseudo-element to a selector.
Typical jobs include styling an element's first letter or first line, inserting content before or after it, styling list item markers, styling the portion a user has selected, and styling the viewbox behind a dialog box.
Syntax
Write a double colon (::) and then the name of the pseudo-element.
Pseudo-element syntax
selector::pseudo-element-name {
CSS properties
}
Text Pseudo-elements
Parts of text content can be targeted with text pseudo-elements: the first line with ::first-line, and the first letter with ::first-letter.
Content Pseudo-elements
Generated content is inserted or styled with content pseudo-elements. ::before and ::after insert content before and after an element, while ::marker targets list item markers, ::selection targets user-selected text, and ::backdrop targets the dialog backdrop.