“Spifftastic,”

As it turns out, when you use either :before or :after with an IMG element in CSS, apparently nothing happens – not in Chrome, Safari, or Firefox (4 and up are what I’ve been using, but I’m assuming it’s not supported in any version).  Unfortunate, but maybe it’s a bug?  No, it isn’t.  It’s not hard to figure out why, really: the W3C noted, under revision 1 of the CSS 2 spec, that for elements such as images, :before and :after are more or less undefined behavior.

Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

Basically, it’s gone undefined for a while now.  This is unfortunate, because I would’ve liked to use this to tack a magnifying glass onto images in my posts to show that they can be clicked.  Unfortunately, it looks like you can’t do that, at least not with CSS.  Javascript is still a viable alternative, but I’m not yet sure if I want to go that route.  So, that’s another bit of misfortune I’ll have to test later.

In the meantime, I hope the W3C actually defines those “interactions,” because it sure would make me happy.  It seems to have taken a long time for them just to get this to the ‘proposed’ stage, however, so who knows.  It doesn’t look like browsers are waiting on the W3C to support everything, so one browser might end up with an implementation that the W3C just copies (and subsequently gimps, perhaps).  As it stands, this just kind of sucks.