如何爲CSS訪問和未訪問的外部鏈接設置不同的圖標？

Question

我試圖爲已訪問和未訪問的外部鏈接設置不同的圖標。起初，我嘗試這樣做：

a[href^="http"] { 
    padding-right: 1.1em; 
    background-image: url(external_link.gif); 
    background-repeat: no-repeat; 
    background-position: center right; 
} 
a[href^="http"]:visited { 
    background-image: url(visited_external_link.gif); 
} 

- 但是，很明顯，它沒有工作。

此：

a { 
    padding-right: 1.1em; 
    background-image: url(external_link.gif); 
    background-repeat: no-repeat; 
    background-position: center right; 
} 
a:visited { 
    background-image: url(visited_external_link.gif); 
} 
a:not([href^="http"]) { 
    background-image: none; 
    padding-right: 0; 
} 

- 沒有工作過。

那麼，我該如何設置不同的圖標，換句話說，只能更改訪問外部鏈接的圖標？沒有課程可能嗎？

Answer 1

理論上你可以嘗試使用a:visited:before或:after選擇結合圖標字體像Font Awesome，這看起來是這樣的：

a:visited:before { 
    content: "\icon-code"; 
} 

或者你可以使用你的背景圖像：

a:visited:before { 
    content: " "; 
    background-image: url('your-background-image.jpg'); 
    height: 10px; 
    width: 10px; 
} 

然而，提防的:visited選擇有限制關於現代瀏覽器中的僞元素（to protect your privacy）;例如在Firefox 4中，您只能更改a:visited鏈接的顏色（請參閱here和here以供參考）。

因此，正如其他的答案中提到，上面會不會因爲流行的瀏覽器不會使其（per W3 school和Mozilla Developer Network）合作生產。

從期刊Mozilla開發者網絡

直接報價：

注：出於保護隱私的原因，瀏覽器的嚴格限制，你可以申請使用此僞類選擇的元素的樣式：唯一的顏色，背景 - 顏色，邊框顏色，邊框底部顏色，邊框左側顏色，邊框右側顏色，邊框頂部顏色，輪廓顏色，列規則顏色，填充和筆觸。還要注意alpha組件將被忽略：取而代之的是使用未訪問規則的alpha分量（除非不透明度爲0，在這種情況下，整個顏色被忽略，並且使用未訪問規則之一）。

而且你會說這就是結束，但它不是！ （1）有（2）很多（3）的有趣的方式來規避這些限制（詳細的博客文章有很多這個問題的參考，你可以看看here on CSS-tricks）。

例如，技巧之一是樣式鏈接到同一href 2個a元件，並且風格第一個是圖標。當有人點擊文字鏈接時，前面的aalso gets affected。

下面是從以前鏈接Quora後（這是基於DuckDuckGo的訪問功能）爲例（這是由於它的鏈接工作可悲的是不作爲工作的這段工作）：

<h2 class="result__title"> 
    <a class="result__a" href="https://google.com">Link to Google 
    </a> 
    <a class="result__check" href="https://google.com"> 
     <span class="result__check__tt">Link icon</span> 
    </a> 
</h2> 

現在在您的CSS中，如果您訪問了鏈接，則只會顯示.result__check（在樣式表中）！

.result__check:before{ 
    content: "\2611"; 
} 
.result__check { 
    color: #fff; 
    position: absolute; 
    right: 100%; 
    top: 0.3em; 
    margin-right: 1em; 
    font-size: 0.8em; 
    width: 1em; 
    white-space: nowrap; 
} 
.result__check:before{ 
    display: inline-block; 
    float: right; 
} 
// This is what gives the color to the visited item 
.result__check:visited { 
    color: #c3c3c3; 
} 
.result__check__tt { 
    visibility: hidden; 
    opacity: 0; 
    background-color: #a3a3a3; 
    background-color: rgba(138,138,138,0.9); 
    padding: 0 1em; 
    font-size: 0.76em; 
    line-height: 2; 
    position: absolute; 
    bottom: 2.5em; 
    left: -0.95em; 
    z-index: 200 
} 
.result__check__tt:before { 
    content: ""; 
    display: block; 
    position: absolute; 
    margin-left: -0.5em; 
    bottom: -0.5em; 
    left: 1.5em; 
    border: 0.5em solid transparent; 
    border-bottom-width: 0; 
    border-top-color: #a3a3a3; 
    border-top-color: rgba(138,138,138,0.9) 
} 
.result__check:hover .result__check__tt { 
    visibility: visible; 
    opacity: 1 
} 

這樣，你是能夠樣式化:visited元素，即使瀏覽器限制它。希望能幫助到你！

Answer 2

在其他答案或其他方法（可能JavaScript很短）中的僞元素建議將不起作用。每W3學校https://www.w3schools.com/cssref/sel_visited.asp：

由於安全問題，瀏覽器限制可以爲a：visited鏈接設置的樣式。

允許的風格是：

• 顏色
• 背景色
• 邊框顏色（和邊框顏色單獨邊）
• 輪廓顏色
• 列規則色
• 填色和筆畫的顏色部分

所有其他樣式都從a鏈接繼承。

即使使用僞元素，正如其他人建議不工作，因爲你仍然需要在CSS聲明，繼續阻止您添加背景圖片:visited。