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

Question:

In several examples on the internet I have found that they sometimes use: before and sometimes :: before

div::before {
  content: 'bla ';
}

div:before {
  content: 'bla ';
}

I've tried them both and they always work for me, so I don't understand if there is any difference (or not), or which one I should use, or if it doesn't really matter and I can use both in any situation.

Answer:

• ::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:

/* CSS3 */
div::before {
  content: 'bla ';
}

/* CSS2.1 */
div:before {
  content: 'bla ';
}

The two syntaxes can be used in all modern browsers and in IE from version 9. IE8 only accepts :before , and previous versions (IE7, IE6) that in theory should no longer exist (or be used), do not support it .

The version of CSS3 was created to differentiate pseudoelements from pseudoclasses , keeping the latter the syntax of CSS2.1 (once the colon).

Below is the definition of the :before syntax in CSS2.1: https://www.w3.org/TR/2011/REC-CSS2-20110607/generate.html#before-after-content

In the CSS3 specification, in the section of changes regarding CSS2 it is reflected: https://drafts.csswg.org/selectors-3/#changesFromCSS2

And finally the ::before in CSS3: https://drafts.csswg.org/selectors-3/#gen-content