Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 882
Mohsen Avatar asked Sep 06 '11 23:09

Mohsen


People also ask

What is the difference before and :: before?

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.

Is it :: before or before?

Note the double-colon ::before versus the single-colon :before . Which one is correct? Technically, the correct answer is ::before .

What is a :: before?

::before. In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

What are :: after and :: before?

Definition and UsageThe ::before selector inserts something before the content of each selected element(s). Use the content property to specify the content to insert. Use the ::after selector to insert something after the content. Version: CSS2.


1 Answers

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.

like image 147
Chris Laplante Avatar answered Oct 13 '22 06:10

Chris Laplante