Please visit my new campsite listing site

:after shock

I’ve just been disabused of a misconception I had regarding CSS’s :after (and, by extension, :before) pseudo-element (I’m also, it would seem, somewhat in the mood for using long words).

Quirksmode – my go-to site for checking browser support for CSS features – states:

[…] :before and :after, with which you can place text or an image before and after each HTML element.

… which isn’t actually true. While applying box-shadow to an element today, and also using :after to add a bottom border which could be given a slightly offset position I noticed that the shadow seemed to be getting applied to the :after element too. I couldn’t decide if this behaviour is what I would expect (having been given scant opportunity in the past to use much CSS3) so decided to set up a jsfiddle to try out a few things.

A bit of playing around led me to discover that the :after pseudo-element is inserted after an element’s content rather than after the element itself. Which is fine, if it wasn’t for the fact that there’s a decent amount of disinformation out there stating the exact opposite.

It’s also pertinent to note that the javascript/DOM equivalent of :after would be node.appendChild(afterContent) rather than node.parentNode.insertAfter(afterContent, node). And I wonder if there are any plans to have :after be put into two modes “after-content” (default), and “after-element” – could be a useful extension.

Now I’m going to get on with what I do best – appearing in the background of music videos for godawful songs which do their utmost to ruin my lunch hour.

No related posts.

Leave a Reply

Security Code: