To style a link by filetype in CSS you can use the following snippet.

Sample CSS

a[href$=".exe"] { background: url(icons/exe.png) left center no-repeat; padding-left: 50px; }
a[href$=".rar"] { background: url(icons/rar.png) left center no-repeat; padding-left: 50px; }
a[href$=".doc"] { background: url(icons/doc.png) left center no-repeat; padding-left: 50px; }
a[href$=".pdf"] { background: url(icons/pdf.png) left center no-repeat; padding-left: 50px; }
a[href$=".zip"] { background: url(icons/zip.png) left center no-repeat; padding-left: 50px; }
a[href$=".html"] { background: url(icons/link.png) left center no-repeat; padding-left: 50px; }

2 thought on “How to style a link by filetype in CSS”

Leave a Reply