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等图标字体结合使用，这类似于：< / p>

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 Developer Network就此问题直接引用：

注意：出于隐私原因，浏览器严格限制您可以使用此伪类选择的元素应用的样式：仅颜色，背景颜色，边框颜色，border-bottom-color，border-left-color， border-right-color，border-top-color，outline-color，column-rule-color，fill和stroke。另请注意，alpha组件将被忽略：使用未访问规则的alpha组件（除非不透明度为0，在这种情况下，将忽略整个颜色，并使用未访问的规则之一））。

你说那是结束了，但它不是！那里（1）是（2）很多（3）有趣的方法来规避这些限制（对于详细的博客文章，有很多参考这个问题，你可以看看here on CSS-tricks）。

例如，其中一个技巧是设置两个链接到同一a的{{1}}元素，并将第一个设置为图标。当有人点击包含文字的链接时，前面的href also gets affected。

以下是先前链接的Quora帖子（基于DuckDuckGo的访问功能）的示例（由于使用了链接，因此很遗憾不能用作工作的snippit）：

现在，在CSS中，如果您访问过该链接，则只会显示<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>（在您的样式表中）！

.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 }元素的样式，即使浏览器限制它。希望它有所帮助！

Answer 2

其他答案或其他方法（简称JavaScript）中的伪元素建议不起作用。每个W3学校https://www.w3schools.com/cssref/sel_visited.asp：

由于安全问题，浏览器限制了可以为：访问过的链接设置的样式。

允许的样式是：


颜色

背景颜色

border-color（和不同边的边框颜色）

轮廓颜色

列规则色

填充和描边的颜色部分


所有其他样式都继承自：link。

即使使用其他人推荐的伪元素也不起作用，因为您仍然需要在css声明中包含:visited，这会继续阻止您添加背景图像。

如何使用CSS为访问和未访问的外部链接设置不同的图标？

2 个答案: