通常時「Link 1」、:hover時「+ Link 1 +」となるようなHTMLとCSSの「あわせ技」について。
/* CSS */
A { color:#cc66ff; text-decoration:none }
A:hover { color:#ff00cc }
.blue { color:#6633ff }
.white { color:#ffffff }
/* HTML */
<A href="foo" class="white">+ <SPAN class="blue">Link 1</SPAN> +</A>
極端な例を挙げますと、音声ブラウザでは、このようなリンクを一々「プラス（+）」とか(*を使ったなら）「アスタリスク」とか読み上げてしまう可能性があります。
CSSは現状まだ実用上非力ですが、InternetExplorerがきちんとサポートするようになれば「+ link + 」のような方法は以下のようなより良い方法で可能になります。現状Mozillaというブラウザでしか確認できませんが。
/* CSS */
a{
color:#cc66ff;
text-decoration:none;
}
a:before{
content:"+ ";
color:#fff; /* 背景色 */
}
a:after{
content:" +";
color:#fff; /* 背景色 */
}
a:hover:before{
color:blue;
}
a:hover:after{
color:blue;
}
/* HTML */
<a href="foo">Link 1</a>
これならHTMLは極めてシンプルになり、CSSを変更すれば装飾方法は後から幾らでも変更できます。装飾を変更しただけでHTMLファイルが更新されてしまうことも無ければ、「プラス」と読み上げられることもありません。