92

I just saw a CSS code that included ::before tag. I looked at MDN to see what the ::before is but I really didn't understand it.

Can someone explain how it works?

Does it make a DOM element before what we select by CSS?

Sunil Garg
  • 14,608
  • 25
  • 132
  • 189
Mohsen
  • 64,437
  • 34
  • 159
  • 186
  • 1
    Afaik, the CSS working group decided to prefix pseudo-elements with an additional colon to differentiate them from pseudo-classes which have only one colon. – Šime Vidas Sep 06 '11 at 23:35
  • 5
    ... and since double-colon notation isn't implemented in IE8, we'll have to wait 'till it's flushed from the market (like in 2016 or so), before we can start using `::before`. Great job, Microsoft `-.-` – Šime Vidas Sep 06 '11 at 23:41
  • 1
    Pseudo-elements have been around since CSS1. The first pseudo-elements were `:first-letter` and `:first-line`. – BoltClock Sep 06 '11 at 23:48

5 Answers5

89

According to those docs, they are equivalent:

element:before  { style properties }  /* CSS2 syntax */

element::before { style properties }  /* CSS3 syntax */

The only difference is that the double colon is used in CSS3, whereas the single colon is the legacy version.

Reasoning:

The ::before notation was introduced in CSS 3 in order to establish a discrimination between pseudo-classes and pseudo-elements. Browsers also accept the notation :before introduced in CSS 2.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Chris Laplante
  • 29,338
  • 17
  • 103
  • 134
23

This distinguishes pseudo elements from pseudo classes.

The difference between pseudo classes and pseudo elements is described at http://www.d.umn.edu/~lcarlson/csswork/selectors/pseudo_dif.html

Robert Levy
  • 28,747
  • 6
  • 62
  • 94
  • 10
    The ::before notation (with two colons) was introduced in CSS3 in order to establish a discrimination between pseudo-classes and pseudo-elements. Browsers also accept the notation :before introduced in CSS 2. Source: https://developer.mozilla.org/en-US/docs/Web/CSS/::before As before is a pseudo ELEMENT and not a pseudo CLASS (like :hover) two colons is better (thus following the CSS3 standard). – Mr. Hugo Dec 01 '16 at 20:11
17

They essentially mean the same thing. The :: was introduced in CSS3 to help descriminate between pseudo elements (like :before and :after) and pseudo classes (like :link and :hover).

prodigitalson
  • 60,050
  • 10
  • 100
  • 114
7

I checked out MDN and w3.org, and the best I could come up with is that :: is used for structural changes, and : is used for styling.

They are currently interchangeable for compatibility reasons.

It appears to separate :link (for instance), which styles a <a>, from :before (which is a structural change).

: is for styling, :: is for structure.

Singular1ty
  • 2,577
  • 1
  • 24
  • 39
2

One is the CSS2 (:before) way and the other is CSS3 (::before). Currently they are interchangeable in browsers that support CSS2 & CSS3.

Here's a good explanation: http://www.impressivewebs.com/before-after-css3/

b01
  • 4,076
  • 2
  • 30
  • 30