Add a small icon to your links, css only

Here is a short css code snippet on how to add a small "opens in new window" link icon.

a[target="_blank"] {

display:inline-block;

line-height:18px; /* check your icon height */

background:url(images/window.png)  center right no-repeat;

padding-right:20px;

} 

You don't need to change your existing HTML for this.

<a href="http://www.vision.to" title="vision.To Design" target="_blank">
Vision.To Design</a>

If Your links contains target "_blank" than the icon will be displayed. You can use this method to expand even more your links presentation ...
Note: XHTML Strict does not support a target HTML attribute.

Live example: Vision.To Design

Displaying file format icons:

a[href$='.pdf'] {

display:inline-block;

line-height:18px; /* check your icon height */

padding-right:20px;

background: transparent url(images/pdf.png)  center right no-repeat;

} 

/* change padding-right to padding left and background 
position center right to center left 
if you want  to display icon on the left side */

You can extend this to display all kinds of links to documents, files.
Example below shows how to add flash file icons.

a[href$='.swf'], a[href$='.fla'] {

display:inline-block;

line-height:18px;

padding-left:20px;

background:transparent url(images/flash_icon.gif) center left no-repeat;

}

This code snippet shows how to add icon for external and email links

a[href^='http:'] {

display:inline-block;

line-height:18px;

padding-left:20px;

background:transparent url(images/external_ink.gif) center right no-repeat;

}


a[href^='mailto:'] {

display:inline-block;

line-height:18px;

padding-left:20px;

background:transparent url(images/mail_to.gif) center left no-repeat;

}