css - 未訪問のリンクのみにアンダースコアを追加するにはどうすればよいですか？

Question

text-decorationページ内のリンクに異なる（または同様の効果）を持たせたい。

「新鮮な」または「未訪問」のリンクについては、リンクが必要text-decoration: underlineです。a:linktext-decoration: nonea:visited

何らかの理由で、CSSはからa:visited継承するtext-decoration同様のプロパティを要求しているようa:linkです。これを回避するにはどうすればよいですか？を使ってみborder-bottomましたが、無駄になりました。

score 3 · Accepted Answer

訪問したリンクを視覚的にスタイル設定することはできますが、使用できるスタイルには制限があります。訪問したリンクに適用できるのは、次のプロパティのみです。

さらに、訪問済みのリンクに設定できるプロパティであっても、未訪問のリンクと訪問済みのリンクの間の透明度を変更することはできません。そうしないと、rgba() または hsla() の色値または透明度を使用できます。キーワード。

これは、悪意のあるページの JavaScript が (隠し要素内の) リンクリストのレンダリングされたスタイルを調べることで、ブラウザの履歴にアクセスできないようにするためです。

Internet Explorer をテストすることはできませんが、上記は Opera にも当てはまるようです。

したがって、事実上、ほとんどのプロパティでは、:visitedリンクを未訪問のリンクとは異なるスタイルにすることはできません。可能な場合、ブラウザは事実上、それについて嘘をつき、リンクがアクセスされていないふりをします。

score 1 · Accepted Answer

border-bottom を使用し、訪問済みリンクの境界線の背景色を指定することで、テキスト装飾の違いをシミュレートできます。

a {
    text-decoration: none;
    border-bottom: 1px solid blue;
}
a:visited {
    border-bottom: 1px solid white;
}

このトリックは、無地の背景を使用する場合にのみ機能します。デモ用の jsfiddle を次に示します: http://jsfiddle.net/gDSxS/

score 1 · Accepted Answer

理想的ではありませんが、下線を使用して、訪問した境界線の色を変更できることがわかりました。(Firefox でテスト済み)

3 に答える 3