css - 如何仅为未访问的链接添加下划线？

Question

我希望我页面中的链接具有不同text-decoration的（或类似的效果）。

对于“新鲜”或“未访问”的链接，我想要text-decoration: underlinefor a:link，但text-decoration: none对于a:visited链接。

a:visited出于某种原因， CSS似乎要求text-decoration从a:link. 我该如何解决这个问题？我尝试使用border-bottom，无济于事。

score 3 · Accepted Answer

在 Mozilla（如此处记录：https://developer.mozilla.org/en-US/docs/CSS/Privacy_and_the_:visited_selector）和 Chromium（可能与 Chrome 相同）下，经过经验验证：

您仍然可以对访问的链接进行可视化样式设置，但现在可以使用的样式受到限制。只有以下属性可以应用于访问的链接：

此外，即使对于您可以为已访问链接设置的属性，您也无法更改未访问链接和已访问链接之间的透明度，否则您将能够使用 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