CSS: Pseudo Element

By Xah Lee. Date: . Last updated: .

What is Pseudo-Element

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

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

Complete List of Pseudo-Elements

  1. ::afterCSS: Insert Content ::Before, ::After
  2. ::beforeCSS: 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

in CSS 2, pseudo-element syntax is with 1 single colon. e.g. p:first-letter

in CSS 3, it's changed to 2 colons, e.g. 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, pseudo-element and pseudo-class