Creating a Printer-Only Style Sheet
When we add a style sheet to a page, we can specify the media type that the
styles apply to. Most of the time, we use the screen type. However, we can use
the print type to define a style sheet that loads only when the page is printed
(or when someone uses the Print Preview function).css3_print_links/index.html
<linkrel="stylesheet"href="print.css"type="text/css"media="print">We then create a print.css style sheet file with this simple rule:
css3_print_links/stylesheets/print.css
a:after{
content:" ("attr(href)") ";
}For every link on the page, this adds the value of the href inside parentheses
after the link’s text. When you print it from a modern browser, it looks like
this:If you want to see it in action without using up paper, you can use your
browser’s Print Preview feature, which also triggers this style sheet.Best of all, Internet Explorer 8 and up support creating content this way, so
there’s no need for a fallback.The double-colon syntax
The :before and :after pseudoelements were introduced in the CSS2.1 specifica-
tion.^2 In early drafts, they appear with two colons, like this:a::after{
content:" ("attr(href)") ";
}report erratum • discussMaking Links Printable with :after and content • 79
Download from Wow! eBook <www.wowebook.com>