如何僅向未訪問鏈接添加下劃線？

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），鉻（可能爲Chrome相同），經驗證實：

你仍然能夠以可視化的風格訪問過的鏈接，但現在有什麼風格，你可以限制使用。只有以下屬性可以被應用於訪問鏈接：

• color
• background-color
• border-color（及其子屬性）
• outline-color
• 的color份填充和中風的屬性

此外，即使對於可以爲訪問鏈接設置的屬性，您也無法更改未訪問鏈接和已訪問鏈接之間的透明度，因爲否則可以使用rgba（）或hsla（）顏色值或透明關鍵字。

這是爲了避免惡意網頁上的JavaScript能夠通過檢查鏈接列表的呈現樣式（隱藏元素）來訪問瀏覽器歷史記錄。

我無法測試Internet Explorer，但上面也是似乎對於Opera來說是正確的。

因此，對於大多數屬性而言，:visited鏈接的樣式不能與未訪問鏈接不同;在那些可以的情況下，瀏覽器將會有效地說謊並假裝鏈接未被訪問。

Answer 2

您可以模擬使用邊框底部，並指定在訪問過的鏈接您的背景邊框的顏色的文字修飾的區別：

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