Using the alt-tag for printing links in CSS
In the process of putting online my CV and trying to have a single version that’s good for both printing and viewing on screen, I discovered a great way to append the value of an attribute through CSS:
a::after {
content: " (" attr(href) ")";
This will read the value of the href
attribute, and print its content after the a
element. I’ve used this specifically in my case to show a 😸 emoji to link to my github profile, but instead show my username when the page is printed:
<a alt="github/aequivinius" href="https://github.com/aequivinius"><span>😺</span></a>
@media print {
a span { /* hide the emoji */
display: none; }
a::after {
content: attr(alt); }
}
This can be expanded, for example, by defining own attributes and selecting based on their presence (a[myattribute]
).
Written on March 26, 2021