DEV Community

Cover image for CSS :before vs ::before & :after vs ::after
Ayc0
Ayc0

Posted on • Updated on

CSS :before vs ::before & :after vs ::after

When reading CSS code, we sometimes see code using :before and other times with ::before (same for ::after).

Is there a difference between the 2 notations? Is one correct?

A bit of history

In CSS2, the syntax used at the time was :before. This was confusing because CSS also had selectors like :hover, but they both had different semantic meanings.

So in Selectors Level 3, they decided to change the syntax for :before to ::before (and for legacy reasons, we can still use :before, but it is now deprecated).
The : notation isn’t deprecated as a whole, instead the old syntax was split into two:

  • : now represents pseudo-classes (and is still valid for :hover for instance),
  • :: represents pseudo-elements (and should be used for ::before).

:pseudo-class

Pseudo-classes represent variations of a state of an element.
When the condition is satisfied, the whole element is selected.

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).

Visual representation of  raw `span::hover` endraw

Example

  • :hover matches an element on hover
  • :not(p) matches an element if it's not a p
  • :last-of-type matches an element that is the last of its siblings, and also matches a certain type selector.

See the full list in MDN

::pseudo-element

On the other hand, pseudo-elements are parts of the original element. They represent fake HTML nodes within the selected element.

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

Visual representation of  raw `span::first-letter` endraw

Example

  • ::before corresponds to a slot just before this element,
  • ::first-line selects the first line in the current element,
  • ::first-letter retrieves the very first letter of the element.

See the full list in MDN

Top comments (1)

Collapse
 
david263 profile image
David Spector

This is the simplest and clearest explanation I have ever seen for these two css selector modifiers.

Meta-comment: it is too bad that the highest-quality Web developer help is scattered across so many, many websites (Stack Overflow, CSS-Tricks.com, dev.to, MDN, .Gists, ..). And some of those sites are a mixture of excellent and terrible help.