I was looking for a hack to apply a CSS style to just a Mac version of a certain broken browser, and noticed something subtle: The external link to the W3 validator on the dithered.com site has an interesting little image beside it. I wondered if the author had made a class for it which he painstakingly added to each external image, but saw no sign of it in the source. With a bit of searching, I found this rule in the CSS:

a[href^="http://"] {
   background: url(../img/external.png) center right no-repeat;
   padding-right: 13px;
   }

That’s a very handy usage of CSS3’s attribute prefix selector.

It’s a pity that it doesn’t work in IE, but that can be fixed by using Dean Edwards’ IE7 patch.

Here is the CSS I use to emulate that effect:

#main a[href^="http://"]{background:url(/i/external.png) center right no-repeat;padding-right:13px;white-space:nowrap}
#main a[href^="http://verens.com"]{background:none;padding-right:0}

I have two lines because my blog uses absolute URLs, and it’s easier to fix this with a hack than to dig through mountains of code 🙂

The white-space:nowrap bit ensures that links do not word-wrap, thus providing interesting CSS breakages where the image appears halfway through the link (thanks Noirin for pointing that out!). Unfortunately, this breaks the image trick for IE6 in cases where the word-wrap would have taken place, but it’s better than the ugly confusion that would otherwise have appeared.