Circle7 Design

Using CSS3 to style your external links is an attactive and simple way to enhance the usability and look of your links.  Such links might include those to external websites, PDF documents or email mailto links. The following technique can be used to signpost your links for users so that they are aware that they may be visiting another website, or opening a document.

Please note: this technique will not work with Internet Explorer 6 due to its lack of support for CSS selectors. These links will be rendered as standard links.

The CSS:

Style external links:

a[href^="http:"] {
background: url(../images_css/externalLink.png) no-repeat right top;
padding-right: 12px;
}

Style email links:

a[href^="mailto:"] {
background: url(../images_css/email.png) no-repeat right top;
padding-right: 18px;
}


Style PDF links:

a[href$=".pdf"] {
background: url(../images_css/pdf.png) no-repeat right top;
padding-right: 20px;
}

Style Microsoft Word links:

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