強調表示されているリンクにマウスを合わせると、選択範囲に一種のバーが作成されるようです。とても奇妙です。下線より下なので関係ないと思います。
「consectetur」と「sapein interdum…」にマウスを合わせました。マウスが離れた後も、バーはそこにとどまります。線の一方の端にリンクがあり、もう一方の端に別のリンクがある場合、両方にカーソルを合わせると、バーが結合され、線全体が塗りつぶされます。
この問題を解決するには、次の 2 つのことが必要です。
- テキストの影を取り除く
- ホバー時にリンクの色を変更しない
関連する CSS:
#content {
color: #444;
font-family: 'Armata', sans-serif;
text-shadow: 1px 1px 0 #fafafa;
line-height: 50px; // make it way too big just to make sure you can see it
}
a { text-decoration: none; color: #069; }
a:hover { color: #08c; }
Safari と Chrome (webkit) で発生しますが、他についてはわかりません。