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>
Visually 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!
See the Pen Identify PDF Bombs by Chris Coyier (@chriscoyier) on CodePen.
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
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
Anyway to do that with a sprite image?
can you style the Attribute
(PDF, 2 MB)
the 2 MB part. with css? like possibly give it a class?
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)]
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…
I’m probably trying to fit a square peg in a round hole, but it would be really great if this is possible.
^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.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
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?
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: “”; }