CSS Pseudo Element

By Xah Lee. Date: . Last updated: .

Pseudo-Element Selectors is a category of CSS Selector Syntax.

“Pseudo-element” means part of an element, such as first letter, first line.

Here is a complete list of pseudo-element:

  1. ::after → CSS: Insert Content ::Before, ::After
  2. ::before → CSS: Insert Content ::Before, ::After
  3. ::first-letter → [see CSS: ::first-letter]
  4. ::first-line → [see CSS: ::first-line]
  5. ::cue
  6. ::selection
  7. ::slotted

Pseudo Element Syntax, One Colon or Two

Note: in CSS 2, pseudo-element syntax is with 1 single colon. example: p:first-letter But in CSS 3, it's changed to 2 colons, example: p::first-letter, to distinguish it from CSS Pseudo Class .

This change is made so that these are considered CSS pseudo-elements, and has a syntax different from so-called pseudo-class such as a:link, a:visited. [see CSS Selector Syntax]

Single colon is still supported in browsers, for backward compatibility.

As of 2018, most websites still use 1 single colon.

CSS Selectors (Syntax to Match HTML Elements)