为什么::在伪元素之前不能使用:visited伪类？

Question

我正在尝试使用伪类和伪元素来设置元素的样式.喜欢hover::before工作完美,但:visited::before不工作.

如果链接被访问但我:visited::before没有工作,我想显示"看到" .

*, *:before, *:after {
        box-sizing: border-box;
    }
    body {
        background-color: #eee;
        font-size: 23px;
        padding: 50px;
        font-family: 'Ubuntu Condensed', sans-serif;
    }
    .style-3 {
        margin: 20px;
        float: left;
        padding: 20px 80px 20px 20px;
        border: 1px solid #ccc;
        background-color: #fff;
        position: relative;
        text-decoration: none;
    }
    .style-3 {
        color: green;
    }
    .style-3:visited {
        color: red;
    }
    .style-3:hover::before {
        content: "Hover";
        position: absolute;
        right: 20px;
        color: yellow;
    }
    .style-3:visited::before {
        content: "Seen";
        position: absolute;
        right: 20px;
        color: blue;
    }

<a href="#1" class="style-3">Seen Effects</a>
<a href="#2" class="style-3">Seen Effects</a>
<a href="#3" class="style-3">Seen Effects</a>

Answer 1

这可能是可能的,但不要把它视为理所当然.根据规范,

注意:样式表作者可以滥用:link和:visited伪类来确定用户未经用户同意访问过哪些网站.

因此,UA可以将所有链接视为未访问的链接,或者实现其他措施以保持用户的隐私,同时以不同方式呈现访问和未访问的链接.

插入内容可以改变元素的大小,因此检测到这一点并了解用户是否访问过某些站点是微不足道的.因此,大多数浏览器都不允许您这样做.

Answer 2

Mozilla开发者网络:访问说

注意:出于隐私原因,浏览器严格限制您可以使用此伪类选择的元素应用的样式:仅颜色,背景颜色,边框颜色,border-bottom-color,border-left-color,border-right -color,border-top-color,outline-color,column-rule-color,fill和stroke.

想法1:创建子元素并为其编写CSS

<a href="#1" class="style-3">Seen Effects<span>Seen</span></a>
<a href="#2" class="style-3">Seen Effects<span>Seen</span></a>
<a href="#3" class="style-3">Seen Effects<span>Seen</span></a>

*, *:before, *:after {
    box-sizing: border-box;
}
body {
    background-color: #eee;
    font-size: 23px;
    padding: 50px;
    font-family: 'Ubuntu Condensed', sans-serif;
}
.style-3 {
    margin: 20px;
    float: left;
    padding: 20px 20px 20px 20px;
    border: 1px solid #ccc;
    background-color: #fff;
    position: relative;
    text-decoration: none;
}
.style-3 {
    color: green;
}
.style-3:visited {
    color: red;
}
.style-3 span{
    color: #fff;
    margin-left: 20px;
}
.style-3:visited span{
    color: #ccc;
    margin-left: 20px;
}

小提琴https://jsfiddle.net/ZigmaEmpire/do8yeLm1/

想法2:使用与背景颜色匹配的文本创建透明背景图像,并更改背景颜色:访问(不推荐)

Answer 3

如果你旁边有一个跨度,这很容易:

*, *:before, *:after {
  box-sizing: border-box;
}
body {
  background-color: #eee;
  font-size: 23px;
  padding: 50px;
  font-family: 'Ubuntu Condensed', sans-serif;
}
.seen {
  margin: 20px;
  float: left;
  padding: 20px 20px 20px 20px;
  border: 1px solid #ccc;
  background-color: #fff;
  position: relative;
  text-decoration: none;
}
.seen {
  color: green;
}
.seen:visited {
  color: red;
}
.seen + span {
  color: #fff;
  margin-left: 20px;
}
.seen:visited + span {
  color: #ccc;
  margin-left: 20px;
}

<a href="#1" class="seen">Seen Effects</a> <span>Seen</span>
<a href="#2" class="seen">Seen Effects</a> <span>Seen</span>
<a href="#3" class="seen">Seen Effects</a> <span>Seen</span>

这在Chrome中不起作用,但在Chromium中有效!