Code Snippet

Home » Code Snippets » CSS » Signify “PDF Bombs”

Signify “PDF Bombs”

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>

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!

Subscribe to The Thread

  1. Roflo

    Long ago I found this:
    http://pooliestudios.com/projects/iconize/

    It’s perhaps more useful than adding :after { content …}.

    Another nice and useful example is the way Wikipedia links to external sites.

    Cheers,
    R

    Reply ↓
    • Friend

      The issue with this that it has to make an HTTP request for one of those images. Unless you did some sort of magic with sprite images, I think appending (PDF) to the end of a PDF link will do just fine.

      Also sites with those little icons seem to get a bit cluttered.

    • Brian

      Roflo, great resource! thx

    • Alex

      Anyway to do that with a sprite image?

  2. Attila Hajzer

    can you style the Attribute
    (PDF, 2 MB)

    the 2 MB part. with css? like possibly give it a class?

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~