Skip to content

Instantly share code, notes, and snippets.

@PeterTheOne

PeterTheOne/index.html

Last active August 29, 2015 14:03
Show Gist options
  • Save PeterTheOne/22057c1ec51029e2576c to your computer and use it in GitHub Desktop.
Save PeterTheOne/22057c1ec51029e2576c to your computer and use it in GitHub Desktop.
Download ZIP
Style links by hreflang depending on the site lang. Inspired by http://lachy.id.au/log/2005/04/handy-css#language
Raw
index.html
<!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>
Raw
style.css
/* 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
Copy link
Author

also take a look at my blogpost: http://petergrassberger.com/blog/style-links-by-hreflang/

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