DEV Community

Discussion on: Cool uses of the ::before and ::after pseudoelements

Collapse
 
kball profile image
Kevin Ball

There's a bit of a history here... essentially, these were originally shipped with single colons :before and :after. Later, the committees decided they should draw a distinction between pseudo-elements (of which these are) and pseudoselectors, so they

  1. Declared all future pseudoelements would only be accessible with 2 colons
  2. Declared that really you should probably use 2 colons for ::before and ::after, but browsers would continue to support single.

TBH, I typically still use single colon (and I think many folks who started in CSS quite a while ago still do), but when I originally published with that there were some very loud complainers, to the extent that it seemed to be distracting from the point of the article, so I updated to use double in the text.

Collapse
 
fluffy profile image
fluffy

Ah, that makes total sense. And yeah I've been using :before and :after ever since they became a part of CSS (even before they were widely-supported), so seeing the :: versions caught me by surprise.

Anyway, thanks for the clarification! It all makes sense in retrospect, although it still seems weird to me that they decided that there needs to be specific syntax for pseudo-elements vs. pseudo-classes. It doesn't seem likely that they'd ever allow the two to collide, for example...