Print stylesheet
From CSS Standards FAQ
- Note that the following only works in CSS3 (which is currently a candidate for a recommendation)
(This can be a lengthy topic but we have to start somewhere...)
If you wish to display the value of an href for print try the following:
Internal link anchors:
<a href="#foo">About Foo</a>
a:not([href^="#"]):after {
content:attr(href);
}
as it finds all the href values that do not begin with the `#` character.
For absolute URLs, we can simply do the following:
a[href]:after {
content:attr(href);
}
However, concerning relative URLs on the site:
<a href="foo">About Foo</a>
We apply the following CSS:
a:not([href^="http:"]):after {
content: " ( http://www.foo.bar/"attr(href)" ) ";
}
This will apply the site URL to hrefs that do not begin with 'http'.
It will then look something like this:
Foo's site ( http://www.foo.bar/foo )
If the site uses leading slashes in the hrefs, then the leading slash can be removed from the above content property value.
If you have other schemes like irc: or ftp: then apply:
a[href^="irc:"]:after,
a[href^="ftp:"]:after {
content:" ( "attr(href)" ) ";
}
Further reading
