Printing Link URLs

Since link URLs are not shown on a Web page, they are not usually printed with the page either. The CSS content property can reveal those URLs in the printed edition of your page. Too bad Internet Explorer (up to and including version 7) still doesn't get it.

To print link URLs:

1.	If desired, remove the styling from your links by typing `a {text-decoration: none; color: black}`.
2.	Add a new pseudo-selector for adding content after links by typing `a:after`.
3.	Type the beginning `{` for the declaration.
4.	Type `content:` to specify which content should appear after links.
5.	To precede the link URL with a space and parentheses, type `" ("`.
6.	To add the URL itself, that is the value of the `href` attribute of the `a` element, type `attr(href)`.
7.	To add the final parentheses, type `")"`.
8.	Type `;` to complete the rule.
9.	Add additional formatting for the link URL, if desired. I used `font-style: italic;`.
10.	Finish the declaration with a `}`.

Tips

The content property is supported by Firefox, Opera, and Safari, but not Internet Explorer. Sigh.
You can keep internal linksthat is links to other parts of the same pagefrom printing out with a:not([href^='#']) :after as the selector in step 2. It's ugly but it works in Firefox and Safari.

Figure 14.7. First I remove the typical coloring and underlining that on-screen links get. Then I take the `HRef` attribute of the selected element and add parentheses and finally italic formatting to it.

Figure 14.8. The value of the link's `href` attribute, which is the URL that we want, is printed after the "click-me" part of the link (in this case, my name), enclosed in parentheses and styled with italics (on the very last line shown).

Figure 14.7. First I remove the typical coloring and underlining that on-screen links get. Then I take the HRef attribute of the selected element and add parentheses and finally italic formatting to it.

Figure 14.8. The value of the link's href attribute, which is the URL that we want, is printed after the "click-me" part of the link (in this case, my name), enclosed in parentheses and styled with italics (on the very last line shown).

Figure 14.7. First I remove the typical coloring and underlining that on-screen links get. Then I take the `HRef` attribute of the selected element and add parentheses and finally italic formatting to it.

Figure 14.8. The value of the link's `href` attribute, which is the URL that we want, is printed after the "click-me" part of the link (in this case, my name), enclosed in parentheses and styled with italics (on the very last line shown).