Create a gist now

Instantly share code, notes, and snippets.

Style links by hreflang depending on the site lang. Inspired by http://lachy.id.au/log/2005/04/handy-css#language
<!doctype html>
<html lang="en"><!-- or "de" -->
<head>
<meta charset="utf-8" />
<title>Style links by hreflang</title>
</head>
<body>
<!-- this link will have "de" appended -->
<a href="http://petergrassberger.at/" hreflang="de">German Site</a>
<!-- this link will stay the same because the site lang is "en" -->
<a href="http://petergrassberger.com/" hreflang="en">English Site</a>
</body>
</html>
/* 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
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment