Display full URL after a link when a page is printed

When browsing on the web, we hide links behind words that describe them to make text flow better. But when you print out a web page, by default all you see is all those links with no clue where they lead to, making them completely useless.

Last weekend I worked on improving the print styling for my blog posts and came across a need to fix this.

Thankfully, Chris Coyier shared a snippet in CSS-Tricks - checks notes - 15 years ago.

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

This will change a link like my website into my website (https://hamatti.org).

However, not all my links are absolute URLs. Whenever I really link to anything on my website, I use relational urls and they can end up looking like search (/search) which is not optimal. In Chris’ post, there was a question from 2020 about how to do this but without a proper answer.

Here’s how I’ve solved that:

@media print {
  a[href^="/"]::after {
    content: " (https://hamatti.org" attr(href) ") ";
  }
}

For each link that starts with /, I manually add the URL into the string. This way, the example above would turn into a search (https://hamatti.org/search) and be much more usable for anyone reading it later.