Using CSS to make printed links readable

The problem: When you print your fancy HTML resume, the links don't show their URLs.
The solution: CSS!

Here's a link with a special print stylesheet. If you try to print this page, you'll see something like this: a link.

This magic trick uses a couple of different features in CSS. First of all, it uses CSS media types to apply a different stylesheet to printed documents. Second, it uses the :after selector to inject some content after each link. Finally, it uses the new CSS attr()-function to fill the :after content with the href of the link.

Putting all of the above together, we get a stylesheet that adds the href of a link after it, but only in printed documents. Here's what my stylesheet looks like:

@media print {
  a:after {
    content: "[" attr(href) "]";
    font-size: smaller;
    position: relative;
    top: -0.1em;
    left: 0.25em;
    padding-right: 0.15em;
    display: inline-block;
    color: black;
  }
}