We all know the traditional css styles for hyperlink manipulation. The anchor pseudo-classes are great for adding small embelishments here and there, but there are a few other pretty cool techniques that can be put to use to really spice up our links.

It is difficult to tell just where a link is going to take you, or if it is going to open a specific file, etc.

There is a way to inform your guests of the intentions of your links with CSS. You can easily add an icon near your link to give your guests an idea of its intentions.

You simply add a class to any external links and in the css you give it a background url to display an external links indicator icon of your choice. I’m assuming you know how to create an anchor element and give it a class? If you don’t then I don’t feel sorry for you.

.external {
background: url(images/externalicon.gif) no-repeat right top;
padding-right: 10px;
}

This conveniently places a little icon to the right of the link, indicating that this is going to take you to an external website. We make room for the icon by adding a 10px pad to the right of the anchor tag’s contents. Try it! You’ll dig it!

If you like that, check this shit out! Attribute selectors allow you to target an element based on the existence or value of an attribute. Pretty basic. But what about substring matching attribute selectors? What? You heard me!

These babies allow you to target an element by matching up the value of the attribute (or part of it!) with text that you supply. Not sure what I mean? Example…

a[href^="http:"] {
background: url(images/externalicon.gif) no-repeat right top;
padding-right: 10px;
}

This little snippet will place the icon just as it did in the previous example. The way this does it though it target every anchor element with and href that starts with “http:” thus designating it as an external link. Sweet! Of course if you use absolute urls to any pages in your site this will affect those as well. You’ll have to figure out how to deal with that little problem.

You can do the same thing for “mailto:” links using the following…

a[href^="mailto:"] {
background: url(images/email.gif) no-repeat right top;
padding-right: 10px;

You can do the same thing for “aim:” links using the following…

a[href^="aim:"] {
background: url(images/aim.gif) no-repeat right top;
padding-right: 10px;

How about giving your users a heads up that the link points to some sort of a downloadable document like a .pdf, .doc, or .xls file? This can be accomplished with the attribute selector [att$=val], which targets attributes that end in a particular value such as .pdf, .doc, or .xls.

a[href$=".pdf"] {
background: url(images/pdf.gif) no-repeat right top;
padding-right: 10px;
 
a[href$=".doc"] {
background: url(images/doc.gif) no-repeat right top;
padding-right: 10px;
 
a[href$=".xls"] {
background: url(images/xls.gif) no-repeat right top;
padding-right: 10px;

The only indicator as to what these links are is the little icon that is added via the css. This can be accomplished in a myriad of ways, but this is just a bit more cool. And it’s a neat little trick the way it targets the elements in a variety of ways.

Peace!