Question

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

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

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，它不允许使用伪元素。 / p>

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

关于这个：

（当我应该或不应该在伪元素之前添加空格时，我也有点模糊，或者甚至是否重要？）

这很重要，因为空格代表了后代组合子：

选择器a:visited a:after代表:after的{{1}}伪元素，它是另一个a的后代，是访问过的链接，以HTML格式显示没有多大意义。
选择器a与a:visited :after类似，但它代表{em>任何类a:visited a:after后代的:after。< / p>
可以将其改写为a:visited。请参阅规范中的the universal selector。

通过省略空格，您将伪元素直接应用于选择器所代表的元素，在您的情况下为a:visited *:after，而不是其任何后代。

结合a：访问a：after，或用伪元素链接伪类

1 个答案: