Accessible links in printer style sheets

Using some CSS voodoo, you can display a text link’s URL in parenthesis after the link text. This is very useful for printer style sheets, where you can’t see where the links are pointing when the page is printed out.

Here’s an example of what you’d see on the screen:

I wrote an blog post about printer style sheets a while ago.

And here’s what you’d see on the printed page:

I wrote an blog post about printer stylesheets (http://www.chrisdpeters.com/green-printer-style-sheet/) a while ago.

Here’s the CSS code, which I would definitely use some specificity on. (I added a reference to .content as an example of using a selector for specificity. We wouldn’t want to have images in our navigation with parenthesis!)

This trick appears to work in all browsers except for Internet Explorer versions 6 and 7.