Accessible links in printer style sheets

Eric posted a question in the Wheels Google Group about a strange CSS display problem. What came out of it was a very interesting CSS trick that has a very practical use.

Using some CSS voodoo, you can display a text link’s URL in parenthesis after the link text. This would be 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.clearcrystalmedia.com/gc/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!)

#content a:after {
    content: " (" attr(href) ")";
}

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

Technorati Tags: Accessibility, ccm, chris peters, clear crystal media, css, html, polymorphism, tip, tips, web design

This entry is filed under Accessibility, Design & CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.