Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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
*/
@PeterTheOne

This comment has been minimized.

Copy link
Owner Author

PeterTheOne commented Jun 27, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.