为什么：before伪元素不工作：访问伪类？ [英] Why ::before pseudo-element not working with :visited pseudo-class?

问题描述

我试图使用伪类和伪元素来样式化我的元素。如 hover :: before 工作正常，但：visited :: before 无效。

I'm trying to style my element with pseudo-class and pseudo-element. like hover::before is working perfectly but :visited::before is not working.

>

如果链接被访问，我想显示Seen，但：visited :: before 无效。

I want to show "Seen" if link is visited but :visited::before isn't working.

*, *: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>

推荐答案

这可能是，但不要理所当然。根据规范，

It may be possible, but don't take it for granted. According to the spec,

注意：样式表作者可能滥用：link和
：visited伪类来确定用户访问过的网站

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.

因此，UA可以将所有链接视为未访问的链接，或实施
其他措施以在呈现访问时保留用户的隐私
和未访问的链接。

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.

插入内容可以更改元素的大小，并知道用户是否访问过某些网站。因此，大多数浏览器不允许您这样做。

Inserting content can change the size of the element, so it would be trivial to detect this and know if the user has visited some sites. Therefore, most browsers won't allow you to do so.

这篇关于为什么：before伪元素不工作：访问伪类？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！