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)}
|
