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. User Avatar
    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

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

    • User Avatar
      Brian

      Roflo, great resource! thx

    • User Avatar
      Alex
      Permalink to comment#

      Anyway to do that with a sprite image?

  2. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    Gary Peach
    Permalink to comment#

    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. User Avatar
    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?

  8. User Avatar
    Bobert
    Permalink to comment#

    Any way to hide it from appearing after image link? I am trying to use this styling, to no avail:

    img a[href$=”.pdf”]:after { content: “”; }

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag