Style Anchor Tags by Link Type with CSS

This code aims to improve user experience. We often encounter situations where we click links without knowing where they lead. This code can improve UX by adding small icons next to links to show visitors that it is an external link – email, PDF file, image, etc.

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

For more on link styling, see Styling External Links with CSS.