CSS: Pseudo Element

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. ::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

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.