Grow your CSS skills. Land your dream job.

Last updated on:

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!

Comments

  1. Roflo
    Permalink to comment#

    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

    • 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.

    • Roflo, great resource! thx

    • Permalink to comment#

      Anyway to do that with a sprite image?

  2. 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=”window.open(this.href);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. Hello,

    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.

    Thanks

    Gary

  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

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".