What is the difference between :before and ::before?

Question

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 some

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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/

Answer 5

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.