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.
: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.