Styling links with CSS3 attribute selectors

Styling links is easy with CSS3 attribute selectors. We're going to use the following attribute selectors:

1. element[attribute$="value"] – matches an element when the value of its attribute ends with value
2. element[attribute*="value"] – matches an element when the value of its attribute contains value
3. element[attribute^="values"] – matches an element when the value of its attribute starts with value.

Here's a sample CSS code:

a[href$="pdf"] {

    background: url(img/pdf.png) no-repeat 100% 2px;
    padding-right: 15px;

}

a[href*="facebook"] {

    background: url(img/facebook.png) no-repeat 100% 0;
    height: 23px;
    padding-right: 29px;
    display: inline-block;
    line-height: 23px;

}

a[href^="http://onwebdev"] {

    background: url(img/recent-entries.gif) no-repeat 100% 55%;
    padding-right: 15px;

}

a[href$="xml"] {

    background: url(img/xml.png) no-repeat 100% 3px;
    padding-right: 16px;

}

You can see the final result here.