我正在尝试使用伪类和伪元素来设计我的元素。喜欢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>
也许有可能，但不要认为这是理所当然的。根据spec http://www.w3.org/TR/css3-selectors/#the-link-pseudo-classes-link-and-visited,
注意：样式表作者可能会滥用 :link 和
:visited 伪类来确定用户访问过哪些网站
未经用户同意。
因此，UA 可以将所有链接视为未访问的链接，或者实施
在渲染访问时保护用户隐私的其他措施
和未访问的链接不同。
插入内容可以更改元素的大小，因此检测这一点并了解用户是否访问过某些网站是很简单的。因此，大多数浏览器不允许您这样做。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
