I've discovered one trick with anchor that shows the real advantage of using CSS when building your web site. Anchors can be associated with an icon according to the link type. For instance if you define the following in your CSS file:
a[rel ~='external'] {
padding-right:18px;
background:transparent url(images/icon_external.gif) no-repeat center right;
}
All <a> tags whose rel attribute equals external will be appended with the given icon on the right. So example if you add the following to your html code:
<a rel="external" href="http://www.google.com">click here</a>
this will be shown as: click here. Of course if your browser is not fully compatible with CSS then you will not see the icon. In this case you need to upgrade your browser or trust me that an icon is displayed!
Using the same idea you can also append a particular icon if href attribute ends with a given pattern. For example to show a PDF icon with any pdf file simply define the following in your CSS file:
a[href $='.pdf'] {
padding-right: 18px;
background: transparent url(images/icon_pdf.gif) no-repeat center right;
}
this will be shown as: download me. The $ has the same meaning as with regular expression if you are familiar with this concept. You can even use the ^ tag to denote pattern that must be at the beginning of href attribute like in the following code snippet:
a[href ^="mailto:"] {
padding-right: 20px;
background: transparent url(images/icon_mailto.gif) no-repeat center right;
}
this will be shown as: email me. Powerful or what!
Finally you could also associate an icon to all <a> tags whose rel attributes has the letters pdf or whatever somewhere mixed in.
a[rel *='pdf'] {
padding-right: 18px;
background: transparent url(images/icon_pdf.gif) no-repeat center right;
}
this will be shown as: download me
As soon as I found this trick never again will I not give a hint to my visitors about links on my web pages. Implementation is done once in the global CSS file and it's dead easy to use. No more excuses. If you want to use the same icons I do you can download the following two libraries:
