Subscribe to William Computer Blog : Entries & Del.icio.us. Add this blog to Technorati Favorites

Styling external link

An external link is a link that goes from one website to another website, at different address.

For usability reason, a little icon is now displayed on the right side of external links within this site. So this is what internal links would look like and this is what external links would look like.

The trick to make external link to display an icon is easy. All I have to do is include a rel attribute with the value offsite to indicate external links.

Now, we need to style the links using CSS. Using the attribute selector allows us to style links with rel attribute.

The following Stylesheet is used to style my external links:

a[rel~="offsite"] {
    background: url(/img/offsite.png) no-repeat right;
    padding-right: 15px;
}

Resources: Attribute Selectors CSS 2.1

1 comments so far

1. Jauhari 15 Mar 2005

Great Post

I want try this one.

Thanks