CSS – Style links depending on file format

Show small icons next to your links using CSS Attribute and Value Selector. Show small icons next to your links telling the user if it is an external link, an email, a pdf, an image.

Source Code:

/* external links */
a[href^="http://"]{
    padding-right: 20px;
    background: url(external.gif) no-repeat center right;
}
/* emails */
a[href^="mailto:"]{
    padding-right: 20px;
    background: url(email.png) no-repeat center right;
}
/* pdfs */
a[href$=".pdf"]{
    padding-right: 20px;
    background: url(pdf.png) no-repeat center right;
}

My official WebSite >