Print URL After Links

@media print{
       a:after{content:" (" attr(href) ") ";font-size:0.8em;font-weight:normal;}
}

Comments

  1. User Avatar
    Montana Flynn
    Permalink to comment#

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

  2. User Avatar
    Ahmad Awais
    Permalink to comment#

    A demo would have been a lot much handy here !

  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.

  4. User Avatar
    Thomas

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

  5. User Avatar
    Joobleblob

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

    • 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!?

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag