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:

Example

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

For a complete list of all CSS Pseudo-elements, visit our CSS Pseudo-elements Reference.