訪問済みリンクの表示を画像でやりたい

CSS

いくつかやり方はあるようだが、CSSでやりた〜い。

で、ロールオーバー用の画像と訪問済みのボタン３つを１つの画像につくり、Y座標をずらすことでそれぞれを表示させることに。




リストを横並びにして、頭につくマークをはずし、

ul {
　　　　list-style-type:none;
}


文字そのものは　X座標をマイナスにして表示をはずす、と。

li a {
padding-left:25px;
line-height:180%;
background:URL(mark.png) no-repeat;
text-decoration:none;
float:left;
width:200px;
text-indent:-1000em;
}


で、マウスが画像の上にきたら　Y座標をマイナスに

li a:hover {
color:#f33;
background-position:0 -30px;
}

そして、訪問済みなら、もっとマイナスに、と

li a:visited {
background-position:0 -60px;
}