How to Display a URL After a Printed Link

Your web page contains information that your users may want to print. On a web page, link text may say something like "learn more." This is not very helpful in print. You can help your site users with a print style sheet rule that will show URLs for links on the printed page. Here is how.

Things You'll Need

• A text editor or WYSIWYG HTML editor

Instructions

1. 

   Create a print style sheet and link it to your web page. The link will look something like the image.

2. Rules in the print.css style sheet will only be used when printing the page.

3. 

   The CSS property to use is the :after pseudo element. Here's an example rule that would apply to the A (anchor) elements, or hyperlinks, in a div on a web page with the ID navbar.

4. The rule in Step 3 translates into English as "after any A element in the navbar print the content of the HREF attribute."

Tips & Warnings

• You can make additional style rules regarding underlining, font, color and so on for the printed links, but the steps above are all that are needed to get the URL to appear in print following the link text.