Skip to main content

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​

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

For example, {{CSSxRef("::first-line")}} can be used to change the font of the first line of a paragraph.

/* 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 a single colon (:) in their notation.

Pseudo-elements do not exist independently. The element of which a pseudo-element is a part is called its originating element. A pseudo-element must appear after all the other components in the complex or compound selector. The last element in the selector is the originating element of the pseudo-element. For example, you can select a paragraph's first line using p::first-line but not the first-line's children. So p::first-line > * is invalid.

A pseudo-element can be selected based on the current state of the originating element. 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

  • {{CSSxRef("::after")}}

B

  • {{CSSxRef("::backdrop")}}
  • {{CSSxRef("::before")}}

C

  • {{CSSxRef("::cue")}} (and {{CSSxRef("::cue", "::cue()")}})

F

  • {{CSSxRef("::file-selector-button")}}
  • {{CSSxRef("::first-letter")}}
  • {{CSSxRef("::first-line")}}

G

  • {{CSSxRef("::grammar-error")}}

H

  • {{CSSxRef("::highlight()")}}

M

  • {{CSSxRef("::marker")}}

P

  • {{CSSxRef("::part", "::part()")}}
  • {{CSSxRef("::placeholder")}}

S

  • {{CSSxRef("::selection")}}
  • {{CSSxRef("::slotted", "::slotted()")}}
  • {{CSSxRef("::spelling-error")}}

T

  • {{CSSxRef("::target-text")}} {{Experimental_Inline}}

V

  • {{cssxref("::view-transition")}}
  • {{cssxref("::view-transition-image-pair()")}}
  • {{cssxref("::view-transition-group()")}}
  • {{cssxref("::view-transition-new()")}}
  • {{cssxref("::view-transition-old()")}}

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

Specifications​

See also​