quote:

Imagine a coworker hands you a printout of a fascinating article she found on the Web. You're reading along and come to this passage: "And that's when I found the secret to eternal life here." The underline tells you there's a clickable link that reveals the secret. But on a piece of paper, of course, you have no way to follow where the link leads.

To prevent this conundrum on your own pages, you can make linked URLs print along with the rest of the text: "secret to eternal life here (http://www.pyramind_scam.com/)." Using an advanced selector :afterand an advanced CSS property called content, you can print text that doesn't appear onscreen at the end of a styled element. Unfortunately, the :after selector and content property trick doesn't work in Internet Explorer 6 or earlier (nor in IE 7, as of this writing). But it does work in Firefox and Safari, so you can at least spell out URLs for the benefit of visitors using those browsers.

To do so, add a style to the print style sheet that prints the URL after each link.

You can even add other text items like parentheses to make it look better:


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



However, this CSS doesn't distinguish between external or internal links, so it also prints unhelpful document-relative links to other pages on the same site: "Visit the home page (../../index.html)." Using a bit of CSS 3 magic, you can force the style to print only absolute URLs (the ones that begin with http://), like so:

a[href^="http://"]:after {
content: " (" attr(href) ") ";
}



Since this style uses yet-to-be-finalized CSS 3 rules, it works only in really new browsers like Firefox and Safari, and even the CSS Validator (Section 2.4.1) doesn't know about it. So if you use root-relative links on your site, you can use another technique to print the correct, full URLs. See this article for more information: www.alistapart.com/articles/goingtoprint/.