Posted By

satie83 on 08/12/12

Tagged

css
links

Versions (?)

Last Edited at 08/12/12 10:09am

Statistics

Viewed 833 times

Favorited by 0 user(s)

Related snippets

CSS - File format-dependent link styles

/ Published in: CSS

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

/* 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);
}