Optimize Your Links For Print Using CSS — Show The URL

By  on  

When moving around from page to page in your trusty browser, you get the benefit of hovering over links and viewing the link's target URL in the status bar. When it comes to page printouts, however, this obviously isn't an option. Most website printouts simply show the link as text with an underline. What good is that?

Providing URLs for links in the print version of your page can be extremely helpful to the reader. Using a small snippet of CSS code, you can get printouts to display link URLs right next to the link text.

The CSS Code

a:link:after, a:visited:after { content:" [" attr(href) "] "; }

The pitfall of this method of displaying links URLs for print is that Internet Explorer ignores this code. If showing link URLs is critical, I'd recommend using a JavaScript alternative. If not, add this snippet to your print stylesheet to make your page print-outs more informative.

Recent Features

  • By
    Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

  • By
    Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

Incredible Demos

  • By
    CSS :target

    One interesting CSS pseudo selector is :target.  The target pseudo selector provides styling capabilities for an element whose ID matches the window location's hash.  Let's have a quick look at how the CSS target pseudo selector works! The HTML Assume there are any number of HTML elements with...

  • By
    Google Extension Effect with CSS or jQuery or MooTools JavaScript

    Both of the two great browser vendors, Google and Mozilla, have Extensions pages that utilize simple but classy animation effects to enhance the page. One of the extensions used by Google is a basic margin-top animation to switch between two panes: a graphic pane...

Discussion

  1. I´ve been reading your blog and CSS zone for a couple of weeks and I have to say that you work is pretty amazing.
    Due to my work I don’t have enough time to mantain my website, but the day that I come back to design my site or blog, I’ll check your tricks, these are really good.

    Keep working that way, you’re a VERY helpful resource for people like me. ;)

    Cheers

  2. Great one.

  3. Great tips !
    Thanks a lot :D

  4. Good trick for printing a web page. But as usual, this simple tricks are not working with internet explorer

  5. Реализация битых, аварийных и подержанных автомобилей. Продать автомобиль – срочный выкуп подержанных автомобилей. Можно после ДТП.
    магазин автозапчастей мерседес
    http://gava.ru

  6. Выбираем отделочные материалы линолеум продам линолеум калуга ковролин brintons Оставьте вашу заявку и вам ответят! мытищи линолеум ковролин синтерос
    Ковровые покрытия для гостиниц ковролин выстовочный коллекции линолеума линолеум terrana top
    http://kovroliny.ru

  7. I figured out how to get around this not working in IE6 and IE7 by using jQuery and a couple of proprietary IE events to show the link when printing. Any interest in porting it to mootools?

    http://beckelman.net/post/2009/02/16/Use-jQuery-to-Show-a-Linke28099s-Address-After-its-Text-When-Printing-In-IE6-and-IE7.aspx

  8. The stuff on this web site is really witty and cool wise

  9. visit

    I happened upon this site while following the links from another site. Your site is wonderful and i bookmarked it. Thank your for the hard work you must have put in to create this wonderful facility. Keep up the excellent work

  10. I love everything about this site!!

  11. Steven Schrab

    This is exactly what I was looking for. Thanks!

  12. Alok

    Is there something I can do as an end-user to print the links when printing a webpage? The CSS method (as well as jQuery method posted by Bill in a comment) seems to be intended for the author of the web page. How do I do this as an end-user given that the author has not done this? I could not find any Firefox add-on that does this.

  13. Alok

    Is there something I can do as an end-user to print the links when printing a web-page? The CSS method (as well as jQuery method posted by Bill in a comment) seems to be intended for the author of the web page. How do I do this as an end-user given that the author has not done this? I could not find any Firefox add-on that does this.

  14. Pravin

    Hi all I want to know …How can we avoid printing url and dates and page no from print window

  15. Robbiego

    Thanks for this simple trick. Works great.

  16. Alok

    This tool allows inserting the CSS into any web page when the page author did not.

    http://readable.tastefulwords.com/

    Checkout the option “More CSS” and use the specified CSS:

    a:link:after, a:visited:after { content:” [” attr(href) “] “; }

  17. Alok

    This custom CSS works still better:

    a:after {content: " [" attr(href) "]"; color:blue;}
    a:link {color: #800000; text-decoration: none;}
    a:visited {color: #800000; text-decoration: none;}
    a:hover {color: #000000; text-decoration: underline;}
    
  18. why not simply:

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

    • Because it would show empty parens for anchors, try with the current page ;)

    • Then why not test if the link starts with http or a direct link without the starting protocol.

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

      This wil stop displaying all te other link types and the empty ones. If you don’t want to display links to mailto, ftp, javascript etc.

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

      don’t forget the qoutation marks :)

  19. Chirag

    Thank you!

  20. Thanks for this article. It’s exactly what I needed to figure out how to suppress this on our site. Now at least I know what to look for in debugging the URLs being printed.

  21. Thats very good I hide it because my customers need print invoice without links:

    @media print
    {
    a:after {  display:none;}
    }
    
  22. What if I’m using relative links (including ones that go back multiple directories) as well as direct links (to other websites)? I’m trying to display urls when you print from my website, aquariumkids.com. Thanks!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!