Skip to content

Instantly share code, notes, and snippets.

@cameronhunter

cameronhunter/responsive-abbreviations.html

Created October 2, 2012 12:31
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cameronhunter/3818664 to your computer and use it in GitHub Desktop.
Save cameronhunter/3818664 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive abbreviations in HTML using CSS
Raw
responsive-abbreviations.html
<!doctype html>
<html>
<head>
<title>Responsive Abbreviations</title>
<style type="text/css">
/* Show "U.K." */
abbr {cursor:default; border:none;}
/* Show "United Kingdom" */
@media (min-width: 481px) {
abbr span {display:none;}
abbr:before {content: attr(title);}
}
/* Show "United Kingdom (U.K.)" */
@media (min-width: 1024px) {
abbr span {display:inline;}
abbr span:before {content: ' (';}
abbr:before {content: attr(title);}
abbr:after {content: ')';}
}
</style>
</head>
<body>
This is a sentence talking about the <abbr title="United Kingdom"><span>U.K.</span></abbr> and the role they play in <abbr title="North American Treaty Organisation"><span>NATO</span></abbr>.
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment