101

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?

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

5 Answers 5

Reset to default
94

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.

Improve this answer
25

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

Improve this answer
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). Commented Dec 1, 2016 at 20:11
19

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

Improve this answer
1
  • Providing an example of a pseudo class was the aHhhh moment, thank you Commented Apr 29 at 13:12
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.

Improve this answer
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... Commented Dec 4, 2023 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/

Improve this answer

Your Answer

By clicking โ€œPost Your Answerโ€, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.