将 a:visited 与 a:after 结合，或将伪类与伪元素链接起来

Question

假设我想在链接被访问后在链接旁边添加一个形状（如复选标记），而不是让它变成紫色，使用 a:after 和 a:visited。

我不确定是否应该选择这样的形状：

a:visited:after {

或者像这样：

a:visited a:after

或

a:visited :after {

（对于何时应该或不应该在伪元素之前添加空格，我也有点模糊，或者它甚至重要吗？）

或者可能是不同的东西？

现在我的 css 看起来像这样：

a:visited:after {
    /* check mark shape */
    content:'\00a0';
    color: black;
    position: relative;
    left:15px;
    display:inline-block;
    width: 3px;
    height: 6px;
    border: solid black;
    border-width: 0 2px 2px 0;  
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}

复选标记形状代码来自 http://webitect.net/design/webdesign/creating-fancy-bullet-points-with-pure-css3/

感谢您的帮助。

Answer 1

您应该像当前一样使用a:visited:after。它不起作用不是因为您的代码中的错误，而是因为问题在于:visited 伪类 - 因为privacy concerns，它不允许使用伪元素。

因此，基本上，您将无法仅将复选标记图标应用于访问过的链接。

关于这个：

（对于何时应该或不应该在伪元素之前添加空格，我也有点模糊，或者它甚至重要吗？）

这很重要，因为空格代表一个后代组合器：

1. 选择器a:visited a:after 代表a 的:after 伪元素，它是另一个a 的后代，这是一个访问链接，这在HTML 中不太有意义。

2. 选择器a:visited :after 类似于a:visited a:after，除了它代表:after 的任何 种a:visited 的后代。

   可以改写为a:visited *:after。请参阅规范中的the universal selector。

通过省略空格，您将伪元素直接应用于它之前的选择器表示的元素，在您的例子中是a:visited，而不是它的任何后代。