Skip to main content
Home / Code Snippets / CSS / Print URL After Links

Print URL After Links

Avatar of Chris Coyier
Author
Chris Coyier
12 Comments
Join Conversation
Last Updated

Rollout: Powerful Feature Flag Management 

@media print {
  a::after{
    content: " (" attr(href) ") ";
  }
}
Frontend Masters logo

Need some front-end development training?

Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, from Testing to Security.

Comments

  1. User Avatar
    Montana Flynn
    Permalink to comment#

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

    Reply
  2. User Avatar
    Ahmad Awais
    Permalink to comment#

    A demo would have been a lot much handy here !

    Reply
  3. User Avatar
    Viv
    Permalink to comment#

    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. User Avatar
    Thomas
    Permalink to comment#

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

    Reply
  5. User Avatar
    Joobleblob
    Permalink to comment#

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

    Reply
    • User Avatar
      Vernon Fowler
      Permalink to comment#

      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 */ }
}
    • User Avatar
      bpj
      Permalink to comment#

      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. User Avatar
    Patrick H. Lauke
    Permalink to comment#

    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. User Avatar
    Dean
    Permalink to comment#

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

    Reply
  8. User Avatar
    Isaac Lloyd
    Permalink to comment#

    This is genius!

    Reply

Leave a Reply

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

All comments are held for moderation. We'll publish all comments that are on topic, not rude, and adhere to our Code of Conduct. You'll even get little stars if you do an extra good job.

You may write comments in Markdown. This is the best way to post any code, inline like `<div>this</div>` or multiline blocks within triple backtick fences (```) with double new lines before and after.

Want to tell us something privately, like pointing out a typo or stuff like that? Contact Us.

We have a
Code of Conduct. Be cool. Be helpful. The web is a big place. Have fun. High five.