如何使用 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 的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 链接设置的样式。

允许的样式是：

• 颜色
• 背景色
• border-color（以及单独边的border-color）
• 轮廓颜色
• 列规则颜色
• 填充和描边的颜色部分

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

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