CSS: Have a site’s favicon behind its link without using JavaScript or PHP
Is that cool or what?! It’s worthwhile to learn more CSS than actually necessary! I didn’t know that you could specify styles for links e.g. without using classes or ids or the other usual stuff. You’re able to show the favicon of the site you’re referring to only with CSS – no JavaScript or PHP included! It’s actually quite simple: If I have a Wikipedia-link, I write “wikipedia” anywhere in the link’s title (<a title=”abc wikipedia efg xyz”>). Now I can refer to it via
a[title~=wikipedia] {
color:black; //for example
}
in the CSS-files. But it can be even more interesting: With :after and content: …;
a[title~=wikipedia]:after {
content: url(http://en.wikipedia.org/favicon.ico);
}
With this phrase you have the Wikipedia’s favicon behind every Link that has a title-attribute which contains the word “wikipedia”. You can extend this thing, till it looks completely trashy:
a[title~=wikipedia]:after {
content: url(http://en.wikipedia.org/favicon.ico);
opacity: 0.5;
filter:Alpha(opacity=50); //shitty IE… always needs extras
}
a[title~=wikipedia]:hover:after {
opacity: 1;
filter:Alpha(opacity=100);
}
…and so on. Also possible with every other site.
Via RSS
Via mail
This is my wholly own, personal blog in which I blog whatever I want. Although I come from Germany I blog in English, simply because it's way cooler. Nevertheless I'm not that great English-speaker, that's why my English is creepily crappy from time to time.
Feeds
Comments