Image beside link

Today I’ll show you how to put an image beside external links on your site, or any other links for that matter. The effect is similar to the links in the References and External links sections of most Wikipedia pages.

Using the code below you will be able to create links like these, which show a small icon beside each link with an external class. Notice that the local links still display normally as the CSS only changes those with class="external" and keeps the others in their original state. The a:visited:hover on line 15 is also an interesting effect to make note of, as it retains the :hover pseudo even on links referencing to visited sites, which wouldn’t show the hover state on one simply styled as a:visited.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style type="text/css">
a{
	color:#f90;
}
a:hover, a:visited:hover{
	color:#fc3;
}
a:visited{
	color:#740;
}
a.external{
	padding-right:18px;
	background:url(ext.gif) 100% 50% no-repeat;
}
a.external:hover, a.external:visited:hover{
	background-image:url(ext_hov.gif);
}
a:visited.external{
	background-image:url(ext_vis.gif);
}
</style>
<a href="#unv-loc">Unvisited local link</a><br /><br />
<a href="">Visited local link</a><br /><br />
<a href="#unv-ext" class="external">Unvisited external link</a><br /><br />
<a href="" class="external">Visited external link</a>

Advanced

For improved results, try combining all three images into one image strip and change your code to suit. This can be done by changing the background-position attribute in CSS. It’s the method I usually prefer as the strip is loaded on page load and doesn’t stall while the user hovers over the link. The change may not be as noticeable for a small image like this, but for larger images it can make a considerable difference.

Just remember that if your text will be a larger font size than the one I’m using you should allow more blank space between each image. If you get stuck, check my tutorial on navigation bar backgrounds for hints on using background-position.