CSS: File Dependent Link Tyles

gistfile1

File format-dependent link styles
This snippet shows small icons next to a link that’s of a certain file format. The following has file format-dependent link styles for email, pdf, and zip file links. You can add more: just copy/paste one chunk and add your own extension (ex. “.mp3″).


/* external links
The ^= specifies that we want to match links that begin with the http://
*/
a[href^="http://"]{
    padding-right: 20px;
    background: url(external.gif) no-repeat center right;
}
 
/* emails
The ^= specifies that we want to match links that begin with the mailto:
*/
a[href^="mailto:"]{
    padding-right: 20px;
    background: url(email.png) no-repeat center right;
}
 
/* pdfs
The $= specifies that we want to match links whose hrefs end with ".pdf".
*/
a[href$=".pdf"]{
    padding-right: 20px;
    background: url(pdf.png) no-repeat center right;
}
/* zip
Same as above but for zip files and it adds an icon at the right of the link. Therefore the :after
*/
a[href$=".zip"]:after{
    content: url(icons/zip.png);
}