When using or researching CSS pseudo-elements, you may have come across different syntax for the
:after pseudo-elements, specifically in the form of a preceding double colon, instead of the traditional single colon. This seems a little confusing at first, but there’s actually a pretty simple explanation.
I had assumed that there would be some difference in the way each functioned, but that’s not the case, as the short and long answers below make clear.
The Short Answer
Putting aside browser support, there’s no difference between
::before, or between
The Long Answer
The single colon syntax (e.g. “:before” or “:first-child”) is the syntax used for both pseudo-classes and pseudo-selectors in all versions of CSS prior to CSS3. With the introduction of CSS3, in order to make a differentiation between pseudo-classes and pseudo-elements (yes, they’re different), in CSS3 all pseudo-elements must use the double-colon syntax, and all pseudo-classes must use the single-colon syntax.
The spec says:
This [double-colon] notation is introduced … in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after). This compatibility is not allowed for the new pseudo-elements introduced in CSS level 3.
Too Little Too Late?
While I certainly welcome beneficial improvements made to the spec, it almost seems like this change is happening too late. There are literally hundreds of millions of web pages out in the wild with stylesheets that could be using the single-colon syntax for pseudo-elements.
As the above quote points out, all modern user agents must support the old syntax, basically for all eternity. For example, if
ten years from now at some point Firefox gets as high as version 7, they still have to support the single-colon syntax in order to avoid “breaking the web”.
So what’s the point of even doing it? It seems like a case of too little too late. Yes, modern websites will have the newer syntax, but only if the developers are keeping up with these changes — which is going to be the case for only a small percentage of developers.
I guess, if anything, it serves to help differentiate the two kinds of selectors for easier maintenance of stylesheets.