Skip to content

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.

Copy link
Owner Author

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.