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?
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.
Note the double-colon ::before versus the single-colon :before . Which one is correct? Technically, the correct answer is ::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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With