But what is it good for?

:after CSS Property For IMG Tag

Did you know that very few browsers implement the :after CSS property for the "img" HTML tag?

Nope, neither did I until I wanted to use it.

I'm in the process of redesigning my personal site, and one of the things I wanted to do was use CSS to place the Flickr logo after any image I include in a post that is stored on Flick. I do this already with a bit of HTML & CSS, but I need to remember to add the snippet of code everytime I include a Flickr image. By implementing it in CSS, all I would have to do is ensure I use the correct class name and it would appear automatically.

So with this in mind, I got testing. First, the HTML:

<img class="flickr-srcd" src="http://farm1.static.flickr.com/121/276074021_43bc40b104_m.jpg" />

Pretty simple and easy to understand. Next the CSS to add the image automatically:

img.flickr-scrd:after { content: url("images/flickr_logo-small-sideways.gif"); padding-left: 5px; }

This should should result in something like this (screenshot):

How img:after should look

Hmmm, in Opera: yes (that's how I got the screenshot above). Everything else I've tested on the Mac: Nope - they don't show the logo image. Using this exact CSS on something like h3 works a treat.

I know most browsers don't pass the Acid2 test, but I was kind of hoping something like this would work. What's more interesting is Safari is meant to pass the acid test, but it doesn't seem to implement this property correctly either.

I've created this simple example to illustrate this.

Oh well, I guess I'm stuck with remembering to add the HTML each time, or maybe a bit of Javascript.

Top