Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • DigitalOcean
  • DO Community
Search
print stylesheet
Code Snippets → CSS → Print URL After Links

Print URL After Links

Avatar of Chris Coyier
Chris Coyier on Sep 4, 2009 (Updated on Aug 15, 2019)
@media print {
  a::after{
    content: " (" attr(href) ") ";
  }
}
Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.

Comments

  1. Montana Flynn
    Permalink to comment# September 4, 2009

    Simply amazing. A great tut would be all about Print stylesheets! Thanks Chris!

    Reply
    • abajan
      Permalink to comment# September 13, 2009

      Well, Chris already has a video tutorial on print stylesheets that’s quite good.

  2. Ahmad Awais
    Permalink to comment# August 9, 2011

    A demo would have been a lot much handy here !

    Reply
    • Alex
      Permalink to comment# October 14, 2019

      Demo http://www.cssdesk.com/tZ6LY

  3. Viv
    Permalink to comment# March 12, 2013

    Demo can be found here:
    http://jsfiddle.net/duemF/

    It’s also possible to turn the link black by adding color: #000, but text-decoration: none; doesn’t seem to work.

    Reply
  4. Thomas
    Permalink to comment# May 2, 2013

    If you’re curious about browser support see the CSS tricks entries for
    Pseudo elements (:after)
    and
    CSS content property

    Reply
  5. Joobleblob
    Permalink to comment# July 8, 2014

    Don’t suppose anyone knows a nice method of doing this but excluding > “mailto:” from select links?

    Reply
    • Vernon Fowler
      Permalink to comment# July 30, 2015

      You could use attribute selectors to filter out mailto: links by using a regular expression that matches href starting with http – see https://css-tricks.com/attribute-selectors/ This would include links with the https protocol too.

      Something like the following but add in the :after at the correct place.

      @media print{
       a[href^="http"] { /* do stuff */ }
      }
      
    • bpj
      Permalink to comment# March 11, 2017

      It is generally useful to give those links which you want displayed in this way a class — I usually call it .external — so that mailto: links and internal links (href="#foo") don’t display in print.

      BTW you should not insert any whitespace after the closing paren. What if it comes right before a punctuation character!?

  6. Patrick H. Lauke
    Permalink to comment# May 18, 2018

    Randomly: if, for whatever reason, you’re using links (with an appropriate ARIA role attribute) to act as buttons or whatever, you may want to exclude those from having their href printed as well…something like

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

    Reply
  7. Dean
    Permalink to comment# June 4, 2018

    Awesome. Exactly what I was looking for and I found it on one of my fav sites.

    Reply
  8. Isaac Lloyd
    Permalink to comment# October 17, 2019

    This is genius!

    Reply
  9. J. Hogue
    Permalink to comment# November 11, 2020

    Is there a way to force the entire URL to show? For instance, I am hiding all links in the navigation except for the one with a “current” class, and showing the URL next to it as sort of a Breadcrumb in the print version of a page. I get Page title (/about-us) but would like to see Page title (https://site.com/about-us). Is that possible?

    Reply
    • Geoff Graham
      Permalink to comment# November 11, 2020

      You could add the TLD to the content property:

      a::after{
        content: " (https://www.site.com"attr(href) ") ";
      }

      That will only work as long the domain is consistent everywhere, of course.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • DigitalOcean
  • DigitalOcean Community
  • About DigitalOcean
  • Legal
  • Free Credit Offer
CSS-Tricks
  • Email
  • Guest Writing
  • Book
  • Advertising
Follow
  • Mastodon
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • iTunes
  • RSS
Back to Top