Styling the hreflang="" attribute

Sometimes I link to web pages that are in a different language.

When an <a> element links to a page that is in a different language than the one the element is in, the hreflang="" attribute may be used to note the language of the page pointed to by the link.

My <a href=/>home page</a> is also available
<a href=/ja/ hreflang=ja>in Japanese</a>
and <a href=/tok/ hreflang=tok>toki pona</a>.

Now, this doesn’t do anything by default. It’s just metadata. But I wanted to try out styling links like this somehow, so the user has some visible indication that, if they click, they’ll end up on a page in a different language.

The first thing we need to do is to make the attribute’s value visible somehow. The simplest thing is to use a combination of the ::after pseudo-element, the content property, and the attr() function, like so:

Next, we need to make this look good. I decided to make a gray “pill” with the language code in it.

Putting it all together, here’s what the HTML in Listing 1 looks like now: