Signify “PDF Bombs”

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Any ol’ anchor link can be a link to a PDF document, but clicking a link like that thinking otherwise can be surprising and uncomfortable for a user. This CSS can visually signify those links.

/* Add " (PDF)" text after links that go to PDFs */
a[href$=".pdf"]:after { content: " (PDF)"; }

/* If file size specified as data attribute, use that too */
a[href$=".pdf"][data-size]:after { content: " (PDF, " attr(data-size) ")"; }

So…

<p>Watch out for the <a href="some.pdf">PDF bomb</a> here!</p>

Visually becomes:

Watch out for the PDF bomb (PDF) here!

Or…

<p>Watch out for the <a href="some.pdf" data-size="2 MB">PDF bomb</a> here!</p>

Becomes:

Watch out for the PDF bomb (PDF, 2 MB) here!

See the Pen Identify PDF Bombs by Chris Coyier (@chriscoyier) on CodePen.