The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Signify “PDF Bombs”

Last 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) ")"; }


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


Watch out for the PDF bomb (PDF) here!


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


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


  1. Roflo
    Permalink to comment#

    Long ago I found this:

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

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


    • Friend
      Permalink to comment#

      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
      Permalink to comment#

      Anyway to do that with a sprite image?

  2. Attila Hajzer
    Permalink to comment#

    can you style the Attribute
    (PDF, 2 MB)

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

  3. S. Tanner
    Permalink to comment#

    I’ve been trying to adapt this to an input button. I tried:

    input[type =”button”][title]:after { content: ” (” attr(title) “)”; }

    as well as:

    input[title]:after { content: ” (” attr(title) “)”; }

    however, neither one adds the content of the title attribute after the text normally shown in the button. Do you have any suggestions on how to make this work?

    Example: [button] —> [button (tooltip information from the title attribute)]

  4. Clark
    Permalink to comment#

    I’m not sure if it’s possible, but maybe someone here could offer an opinion…

    The use of the attribute selector a[href$=”.pdf”] is intriguing to me, and it’s really cool you can add content before or after the link, but what I’d REALLY like to do is to use this coding concept to set an attribute within the <a> tag to open the target in a new window if it’s a PDF file… (i.e., target=”_blank”, or onclick=”;return false;).

    This doesn’t work, but something like it is what I have in mind…

    a[href$=".pdf"] { [attr(target)="_blank"]; }

    I’m probably trying to fit a square peg in a round hole, but it would be really great if this is possible.

  5. Who?
    Permalink to comment#

    ^Generated content is already stretching the scope of CSS’s purpose, and that example takes it even further. I think you’re better off doing some server-side scripting if you want to automatically add target="blank" to PDF links.

  6. Gary Peach
    Permalink to comment#


    Getting a strange display quirk in Safari with PDF Bombs. Link state doesn’t show (PDF, 400 KB) at the end of the text hyperlink but when you ‘hover’ over the link it shows up, then vanishes again when you remove mouse.

    I have used this in 3 websites up to now and its the same in every one (in Safari).

    Its okay in Firefox though, go figure!!

    Can anyone shed light on this.



  7. Aldo
    Permalink to comment#

    For links to PDF’s is it best practice to show PDF size with the link to give the user information before choosing to click?

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed