Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Style links by hreflang depending on the site lang. Inspired by
<!doctype html>
<html lang="en"><!-- or "de" -->
<meta charset="utf-8" />
<title>Style links by hreflang</title>
<!-- this link will have "de" appended -->
<a href="" hreflang="de">German Site</a>
<!-- this link will stay the same because the site lang is "en" -->
<a href="" hreflang="en">English Site</a>
/* shows hreflang that are not "en" after links on a lang="en" site */
html[lang="en"] :link[hreflang]:not([hreflang="en"])::after {
content: " "attr(hreflang);
font-size: xx-small;
/* shows hreflang that are not "de" after links on a lang="de" site */
html[lang="de"] :link[hreflang]:not([hreflang="de"])::after {
content: " "attr(hreflang);
font-size: xx-small;
add more if you have more languages

This comment has been minimized.

Show comment
Hide comment
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment