This will work in Firefox, Safari and IE7 upwards. It will not work in IE6 which does not support attribute selectors
See also gerdami's cross-site include for link icons at http://css-competition.wikidot.com/package:15
Ends with
The rule below looks for all a tags whose href attribute ends in ".pdf", ".doc" or ".xls" then gives it some extra padding on the right of the link to make room for a small icon as a fixed position background image. The dollar sign means "ends with":
a[href $='.pdf'] {
padding-right: 18px;
background: transparent url(/local—files/css:icons/icon_pdf.gif) no-repeat center right;
}
a[href $='.doc'] {
padding-right: 18px;
background: transparent url(/local—files/css:icons/icon_doc.gif) no-repeat center right;
}
a[href $='.xls'] {
padding-right: 18px;
background: transparent url(/local—files/css:icons/icon_xls.gif) no-repeat center right;
}
Starts with
The caret (^) and equals in the mailto rule below means "starts with". The rule looks for all a tags whose href starts with "mailto:", then gives that link some extra right padding to display a small mail icon as a background image.
a[href ^="mailto:"] {
padding-right: 20px;
background: transparent url(icon_mailto.gif) no-repeat center right;
}
a:link, a;visited :not([href *="strathviewconsultants"]) {
padding-right: 18px;
background: transparent url(/local—files/css:icons/external.gif) no-repeat center right;
}
