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:


If desired, remove the styling from your links by typing a {text-decoration: none; color: black}.


Add a new pseudo-selector for adding content after links by typing a:after.


Type the beginning { for the declaration.


Type content: to specify which content should appear after links.


To precede the link URL with a space and parentheses, type " (".


To add the URL itself, that is the value of the href attribute of the a element, type attr(href).


To add the final parentheses, type ")".


Type ; to complete the rule.


Add additional formatting for the link URL, if desired. I used font-style: italic;.


Finish the declaration with a }.


  • 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).

HTML, XHTML, & CSS(c) Visual QuickStart Guide
HTML, XHTML, and CSS, Sixth Edition
ISBN: 0321430840
EAN: 2147483647
Year: 2004
Pages: 340

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: