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

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

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