Pseudo-elements

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s).

Syntax

css
selector::pseudo-element {
  property: value;
}

For example, ::first-line can be used to change the font of the first line of a paragraph.

css
/* The first line of every <p> element. */
p::first-line {
  color: blue;
  text-transform: uppercase;
}

Double colons (::) are used for pseudo-elements. This distinguishes pseudo-elements from pseudo-classes that use single colon (:) in their notation.

You can use only one pseudo-element in a selector. The pseudo-element must appear after all the other components in the complex or compound selector in which it appears. For example, you can select a paragraph's first line using p::first-line but not the first-line's children or a hovered first line. So both p::first-line > * and p::first-line:hover are invalid.

While it is not possible to select an element based on its state by using pseudo-elements, a pseudo-element can be used to select and style a part of an element that already has a state applied to it. For example, p:hover::first-line selects the first line (pseudo-element) of a paragraph when the paragraph itself is being hovered (pseudo-class).

Note: When a selector list contains an invalid selector, the entire style block is ignored.

List of pseudo-elements

Pseudo-elements defined by a set of CSS specifications include the following:

A

B

C

F

G

M

P

S

T

Note: Browsers support the single colon syntax only for the original four pseudo-elements: ::before, ::after, ::first-line, and ::first-letter.

Specifications

Specification
CSS Pseudo-Elements Module Level 4
CSS Positioned Layout Module Level 4
CSS Shadow Parts
WebVTT: The Web Video Text Tracks Format

See also