Naast een download link voor een PDF bestand, komt een icon van het PDF logo, naast een download link voor een MP3 komt het icon van een MP3, etc … Dit werkt niet in Internet Explorer 6

HTML

<p><a href="mailto:x@x.com">email</a></p>
<p><a class="popup" href="#">pop up</a></p>
<p><a href="test.doc">word</a> </p>
<p><a href="test.xls">excel</a></p>
<p><a rel="external" href="http://www.test.com">website</a></p>
<p><a href="test.pdf">pdf</a></p>
<p><a rel="pdf" href="test">pdf2</a></p>
<p><a rel="xxpdfxx" href="test">pdf3</a></p>

CSS

/* all A tags whose HREF attribute ends in .pdf */
a[href$='.pdf'] {
	padding-left: 18px;
	background: transparent url(pdf.gif) no-repeat center left;
}
/* all A tags whose REL attribute = pdf */
a[rel='pdf'] {
	padding-left: 18px;
	background: transparent url(pdf.gif) no-repeat center left;
}
/*  all A tags whose REL attributes has the string pdf inside */
a[rel*='pdf'] {
	padding-left: 18px;
	background: transparent url(pdf.gif) no-repeat center left;
}
/* all A tags whose HREF attribute starts with mailto: */
a[href ^="mailto:"] {
	padding-left: 18px;
    background: transparent url(mailto.gif) no-repeat center left;

}
/* all A tags whose CLASS attribute is popup */
a[class ="popup"] {
	padding-left: 18px;
    background: transparent url(popup.gif) no-repeat center left;
}
a[href$='.doc'] {
	padding-left: 18px;
	background: transparent url(doc.gif) no-repeat center left;
}
a[href$='.xls'] {
	padding-left: 18px;
	background: transparent url(xls.gif) no-repeat center left;
}
a[rel ~='external'] {
	padding-left: 18px;
	background: transparent url(external.gif) no-repeat center left;
}