Show URL When Printing a Page

When you print a web page, you'd naturally expect to see the URL of a link, instead of just the name of the link (usually the underlined text). If you are the webmaster of a site, you could generate a different page formatted for printing (for example, look for the print link in many news sites). Another way is to add the following rule into your CSS file:

@media print {
  a:after { content:" (" attr(href) ") "; }
}

The rule above will append the value of the URL after the link. How does it work?

@media print

Specifies the media type (in this case, for printing) for the following set of statements in braces.

a:after

Instructs the CSS engine to select the <a> tag, while :after is a pseudo-element that instructs the CSS engine to insert some content.

{ content:" (" attr(href) ")"; }

Inserts (or generates) the value of the href attribute, in parentheses, into the output.

You can see the effect of this rule in my web site; just use the Print Preview function in your browser and examine the text after each link.

See Also

• Based on David Walsh's Optimize Your Links For Print Using CSS — Show The URL
• W3C CSS2 Media Types
• W3C CSS2 Selectors
• W3C CSS2 Generated content, automatic numbering, and lists