In various examples on the internet I have found that they sometimes use :before and other times ::before
div::before {
content: 'bla ';
}
div:before {
content: 'bla ';
}
I've tried both of them and they always work for me, so I don't understand if there is any difference (or not), or which of the two I should use, or if it doesn't really matter and I can use both in any situation.
::before
(twice the colon) is the CSS3 "version" of the pseudo-element.:before
(once the colon) is the CSS2.1 "version" of the pseudo-element.The difference in terms of code:
Both syntaxes can be used in all modern browsers and in IE as of version 9. IE8 only accepts
:before
, and older versions (IE7, IE6) that in theory should no longer exist (or be used), do not support it.The CSS3 version was created to differentiate pseudo -elements from pseudo- classes , the latter keeping the CSS2.1 syntax (once a colon).
Here is the definition of the syntax
:before
in CSS2.1: https://www.w3.org/TR/2011/REC-CSS2-20110607/generate.html#before-after-contentIn the CSS3 specification, in the changes from CSS2 section it is reflected: https://drafts.csswg.org/selectors-3/#changesFromCSS2
And finally the
::before
CSS3 specification: https://drafts.csswg.org/selectors-3/#gen-content