DEV Community

Sindre Bøyum
Sindre Bøyum

Posted on • Updated on

Understanding pseudo elements: Display hrefs in printed documents

Have you ever tried reading a printed out website, then instantly becoming frustrated when you're trying to click the links? Pseudo elements can't really help you much with this, however they might help you a bit by displaying the links' urls! How do you do this, you ask? Let me show you the power of pseudo elements and the attr() function.

Printed documents only have two dimensions, and they aren't even clickable?! How can we tell the user what the underlined text goes to?

By using the content property together with the attr() CSS function, we can display the value of any attribute. As href is an attribute on a elements, surely we can display this too, right? Of course!

<a href="https://dev.to">a link with no clear sign of where it points to</a>
Enter fullscreen mode Exit fullscreen mode
@media print {
  a::after {
    content: ' (' attr(href) ') ';
  }
}
Enter fullscreen mode Exit fullscreen mode

This code will yield the following result:
The link is rendered out with the url in parantheses showing after the link text

Granted printed documents have become rare, this is still a neat trick for those of us working with article heavy sites!

Top comments (2)

Collapse
 
havardob profile image
Håvard Brynjulfsen

Such an easy solution, thanks!

If you don't want to anchor links to display their destination, and you only want to write out the URLs and e-mail addresses you can change it to this:

    a[href*="http"]:after,
    a[href*="mailto:"]:after {
        content: ' ('attr(href) ') ';
    }
Collapse
 
boyum profile image
Sindre Bøyum

That's a really nice suggestion, thanks!