What is the difference between:before and: before?

In several 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 tried them both 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 really doesn't matter and I can use both in any situation.

 10
Author: Shaz, 2016-09-27
Source

1 answers

  • ::before (twice the colon) is the CSS3" version " of the pseudoelement.
  • :before (Once the colon) is the CSS2.1" version " of the pseudoelement.

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 starting with Version 9. IE8 only accepts :before, and earlier versions (IE7, IE6) that in theory should no longer exist (or be used), do not support it.

Version of CSS3 was created to differentiate the pseudoelements from the pseudoclases , maintaining the latter syntax of CSS2.1 (once the colon).

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

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

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

 8
Author: Shaz, 2016-09-27 00:51:37