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?

3
  • 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. Sep 6, 2011 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 -.- Sep 6, 2011 at 23:41
  • 1
    Pseudo-elements have been around since CSS1. The first pseudo-elements were :first-letter and :first-line.
    – BoltClock
    Sep 6, 2011 at 23:48

5 Answers 5

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.

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

1
  • 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: 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 1, 2016 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).

6

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.

1
  • How are we changing the Structure when for example we write .text::selection{ background: red;}?!! It is a Pseudo-Classes and there are no structure changes... It is just about styling... Dec 4 at 21:53
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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.