Use Cases for Multiple Pseudo Elements

Avatar of Chris Coyier
Chris Coyier on (Updated on )

I used to do an entire talk on pseudo elements. One of the things I mentioned was that there used to be a CSS3 spec that included “multiple” pseudo elements, but it was removed. That was kind of a bummer, because sometimes just ::before and ::after aren’t enough. Why the seemingly arbitrary limitation?

Now Alan Stearns from Adobe is heading up a new draft for the CSSWG for getting this added back to the spec (and make it work in browsers). He needs some help! He needs visual use cases on why designers want this.

One example I thought of right away was the speech bubble thing. The speech bubble arrow can be made from a pseudo element, but what if you need those pseudo elements for other things? For instance, a blockquote might have opening and closing quotes around it.

Or you might need to use the clearfix on it if it’s possible there are floated elements inside. The clearfix (usually) uses both available pseudo elements on an element.

On a larger scale, take a browse around CodePen. There are lots of awesome examples like this one with a shooting tank. A lot of those style demos are built from a big set of HTML elements for each part of them. Why pollute the DOM with semantic elements used for non-semantic purposes? All this stuff could be done with pseudo elements instead.

So let’s have it folks! What are some use cases you’ve come across where you wanted multiple pseudo elements but didn’t have them? Helping Alan out with this helps move the web forward.