Skip to content

Instantly share code, notes, and snippets.

@aprescott
Created April 14, 2011 22:08
Show Gist options
  • Save aprescott/920685 to your computer and use it in GitHub Desktop.
Save aprescott/920685 to your computer and use it in GitHub Desktop.
Uses HTML5 data-* attributes and old-school CSS content to get around that problem of PDF links causing browser hangs because you didn't check the URL.
<!-- See it in action: http://jsfiddle.net/eVAg4/1/ -->
<!doctype html>
<head>
<meta charset="UTF-8">
<title>PDF link file sizes in CSS</title>
<style type="text/css">
a[href$=".pdf"]::after { content: " (PDF)"; }
a[href$=".pdf"][data-size]::after { content: " (PDF, " attr(data-size) ")"; }
</style>
</head>
<body>
<p>Here's some text. But watch out for the <a href="some.pdf">PDF bomb</a> sitting in this paragraph. There's another, <a href="another.pdf" data-size="2 MB">much bigger one</a> somewhere else, too.</p>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment