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 {
vertical-align:middle;
padding-right:2px;
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.