我试图用伪类和伪元素来设计我的元素。喜欢hover :: before正常工作，但是：visited :: before is not working。
如果链接被访问，我想显示“Seen”，但是：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>
解决方法
这可能是可以的，但不要认为是理所当然的。根据
spec，
Note: It is possible for style sheet authors to abuse the :link and
:visited pseudo-classes to determine which sites a user has visited
without the user’s consent.UAs may therefore treat all links as unvisited links,or implement
other measures to preserve the user’s privacy while rendering visited
and unvisited links differently.
插入内容可以更改元素的大小，因此检测此内容并且知道用户是否访问过某些站点也是微不足道的。因此，大多数浏览器将不允许您这样做。
