Quarter Life Crisis

The world according to Sven-S. Porst

« RoundupMainF11 »

:before and :after

276 words

Those people who look at the full beauty of this site may have noticed the little icons I introduced for iTMS and AFP links. Of course these are introduced automagically using CSS 2's :before pseudo class à la

a[href^=itms]:before {
   content: url(image-url);
This works rather well – at least in Safari and Camino. And using those tags is both easy to get the hang of and can be rather addictive – too addictive, perhaps, as I'm not really sure those icons aren't spoiling the clean look of the page.

While playing with them, I noticed that they seem to be quite limited in what's possible to do in terms of styling those icons. My impression is that I can't have much of a say about where the content goes. While I can set the padding, I cannot displace it using position. I don't know whether this is a design decision of CSS or a matter of the implementation.

I do know, however that I'd like to do just that, set the position: I thought not having those icons around all the time would be neat. So I tried out the CSS shown above for a[href^=itms]:hover:before, which actually worked but caused the text to jump around on screen as soon as you hover over the link. Not too good. Thus, I thought, I should displace the icon so it will appear above adjacent text while the mouse is hovering over the link. Doesn't seem to work, though. At least I didn't manage to get it to work.

And don't forget that you can add these CSS statements to Safari's user stylesheet – or NWW's.

October 24, 2003, 1:04

Add your comment

« RoundupMainF11 »

Comments on




This page

Out & About

pinboard Links


Received data seems to be invalid. The wanted file does probably not exist or the guys at last.fm changed something.