Coding Architecture

Max Design - Simple, accessible external linksを参考に試してみました。demoをCSSをオフにして確認してみるとわかる。

demo

■HTML
<p><a class="external" href="#">coding architecterのサイトへ<span> (外部リンク)</span></a></p>

■CSS
a.external span{
position: absolute;
left: -5000px;
width: 4000px;
}

a.external:link{
background:url(common/images/ico_conductor_external01.gif) no-repeat 100% -2px;
padding: 0 20px 0 0;
}

a.external:visited{
color: purple;
background: url(common/images/ico_conductor_external01.gif) no-repeat 100% -102px;
padding: 0 20px 0 0;
}

a.external:hover{
color: red;
background: url(common/images/ico_conductor_external01.gif) no-repeat 100% -202px;
padding: 0 20px 0 0;
}