Append an image to every file with the same extention

If you have a web site with many linked files and you would like the links to have an image, like an Adobe PDG logo, this is a great snippet of CSS code to remember. Don’t forget to add the less than and greater than signs around the style tag, I can’t do it because the blog will not show the tag.

1. style
2. a[href $=’.pdf’] {
3. padding-left: 20px;
4. background: transparent url(pdf.jpg) no-repeat center
5. }
6. /style


$ = at the end
^ = at the beginning
* = anywhere

This will append a PDF logo to every file that ends with .pdf, saving you more time to worry about design. Most of web design is repetition, and if you can eliminate most of the effort, you can spend more time on more important things.

Happy Coding!


No comments yet

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: