Signify “PDF Bombs”

0
0

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>

 

Or…

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

 

  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.