Treehouse: Grow your CSS skills. Land your dream job.

Last updated on:

Print URL After Links

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

Comments

  1. Montana Flynn
    Permalink to comment#

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

  2. Ahmad Awais
    Permalink to comment#

    A demo would have been a lot much handy here !

  3. 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. Thomas

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

  5. Joobleblob

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

    • 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 */ }
      }
      

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```