CSS Pseudo Elements

HTML-CSS
1

Why do some pseudo elements have two “:” in front of the selector and others just one “:”?
eg. ::after vs :hover

2

This is from the MDN docs.

Note: CSS3 introduced the ::before notation (with two colons) to distinguish pseudo-classes from pseudo-elements. Browsers also accept :before , introduced in CSS2

The web still needs to be backwards compatible which is why you can still use :before instead of ::before

2 Likes
3

One colon is a pseudo-class and usually reflects state of an element.

Two colons designate a pseudo-elements which allow you to select part of an element in the DOM.

EDIT: austinmoore1492’s feedback is important as well. Especially when you are targeting older browsers.

1 Like