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

Question

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

对于“新鲜”或“未访问”的链接，我希望text-decoration: underline用于a:link，text-decoration: none用于a:visited个链接。

出于某种原因，CSS似乎要求a:visited继承text-decoration以及来自a:link的类似属性。我该如何解决这个问题？我尝试使用border-bottom，但无济于事。

Answer 1

根据Mozilla（documented here: https://developer.mozilla.org/en-US/docs/CSS/Privacy_and_the_:visited_selector）和Chromium（可能与Chrome相同），经验证实：

  

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

• color
• background-color
• border-color（及其子属性）
• outline-color
• 填充和描边属性的color部分

  

此外，即使您可以为访问过的链接设置的属性，您也无法更改未访问链接和访问过的链接之间的透明度，因为您可以使用rgba（）或hsla（）颜色值或透明的关键字。

这是为了避免恶意网页上的JavaScript通过检查链接列表的呈现样式（隐藏元素）来访问您的浏览器历史记录。

我无法测试Internet Explorer，但上面的似乎对于Opera来说是真的。

因此，实际上，对于大多数属性，:visited链接的样式与未访问链接的格式不同;在他们可以的情况下，浏览器会有效地谎报它并“假装”链接未被访问。

Answer 2

您可以使用border-bottom模拟文本修饰差异，并为访问过的链接上的边框指定背景颜色：

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

只有拥有纯色背景才能使用此技巧。这里有一个jsfiddle演示：http://jsfiddle.net/gDSxS/

Answer 3

嗯，它并不理想，但我发现你可以使用下划线并更改访问过的边框颜色。 （在firefox中测试）

在这里演示：http://codepen.io/anon/pen/sbhFA