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

C

5

95

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?

Cannae answered 6/9, 2011 at 23:31 Comment(3)

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. – Ptolemaic 6/9, 2011 at 23:35

... 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 -.- – Ptolemaic 6/9, 2011 at 23:41

Pseudo-elements have been around since CSS1. The first pseudo-elements were :first-letter and :first-line. – Gentilis 6/9, 2011 at 23:48

S

24

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

Satterwhite answered 6/9, 2011 at 23:38 Comment(1)

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). – Extraversion 1/12, 2016 at 20:11

P

91

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.

Puzzler answered 6/9, 2011 at 23:33 Comment(0)

S

24

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

Satterwhite answered 6/9, 2011 at 23:38 Comment(1)

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). – Extraversion 1/12, 2016 at 20:11

S

18

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

Sparkie answered 6/9, 2011 at 23:35 Comment(0)

F

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.

Flew answered 6/9, 2011 at 23:38 Comment(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... – Macruran 4/12, 2023 at 21:53

C

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/

Claudelle answered 6/9, 2011 at 23:35 Comment(0)

Recommended topics

Hot tags