Attribute values contentt
A slight departure from what you'd normally consider displayed content, you can also add the value(s) of a HTML attribute as content in CSS2. The href attribute of a link- or its URL- would be an example. Ok, "so how the heck is that useful?", you may ask. Well, if you think real hard, it can be. For instance, one flaw of webpages when they're printed out is that links on the page become meaningless to the viewer with paper in hand. They certainly can't tell what the actual URL of each link is. Lets change that:
@media print{
a[href]:after{
content: " (" attr(href) ")";
}
}
The key here is the special value "attr(href)", which you can substitute "href" with any attribute for that element. Now when the page is printed, all links on the page will have its URL displayed in parentheses following it. The result would look something like this:
Printed version
There are many places to turn to online for news.
CNN (http://www.cnn.com) remains perhaps
the most popular, but there is also MSNBC
(http://www.msnbc.com), BBC News
(http://news.bbc.co.uk), and for technology news,
News.com (http://www.news.com) and
Wired (http://www.wired.com).
Need another example? Here's one that writes out the Alt attribute of each image on the page before the image, which may be useful if targeted towards a text only media:
IMG:before{content: "Image Description: " attr(alt)}
