Question

I was wondering how hard it is to make a class for downloads that places an icon right before the text and both text and icon are part of the link to the attached file. Is there a simple way to do this with CSS?

Answer 1

Assuming that all links to downloads are a elements, of class-name ‘downloadLink’:

.downloadLink {
    background-image: url(path/to/image.png);
    background-position: 0 50%;
    background-repeat: no-repeat;
}

If those links are of the format:

<a href="http://example.com/downloads/document.pdf">document.pdf</a>
<a href="http://example.com/downloads/image.png">image.png</a>

Then the css:

.downloadLink[href$=pdf] {
    background-image: url(path/to/pdf_background_image.png);
    background-position: 0 50%;
    background-repeat: no-repeat;
}
.downloadLink[href$=png] {
    background-image: url(path/to/png_background_image.png);
    background-position: 0 50%;
    background-repeat: no-repeat;
}

Will give specific backgrounds to links with a href attribute that ends with pdf or png. This approach is based around CSS3’s attribute-selectors, which might reduce cross-browser compatibility but, according to Quirksmode’s compatibility table not by much (basically everything above, and including, IE7 should support this (albeit it doesn’t specify which of the selectors are supported) in IE or other browsers).

References:

• attribute-ends-with $= selector.