为什么 ::before 伪元素不能与 :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

这可能是可能的，但不要认为这是理所当然的。根据spec，

注意：样式表作者可能会滥用 :link 和 :visited 伪类来确定用户访问过哪些站点 未经用户同意。

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

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

Answer 2

Mozilla Developer Network :visited 说

注意：出于隐私原因，浏览器严格限制您可以使用此伪类选择的元素应用的样式：仅颜色、背景颜色、边框颜色、边框底部颜色、边框左颜色、右边框颜色、边框顶部颜色、轮廓颜色、列规则颜色、填充和描边。

想法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：创建透明背景图片，文字与背景颜色匹配，并为:visited更改背景颜色（不推荐）

Answer 3

尝试使用className 将visited class , css :before 属性应用到单击的a 元素； localStorage 存储已单击的 hash 元素的 a.style-3。如果点击了a.style-3 元素，则在localStorage.visited 中使用存储的hash 维护visited class

$(function() {
  // if `localStorage.visited` `undefined`, 
  // set `localStorage.visited` to array as string
  if (!localStorage.visited) {
    localStorage.setItem("visited", "[]");
  } else {
    // get `localStorage.visited` as array
    var visited = JSON.parse(localStorage.getItem("visited"));
    // iterate `visited` array of `hash` items,
    // set `visited` `class` at `a.style-3` elements having
    // `hash` stored within `visited`
    visited.forEach(function(link, index) {
      $("a.style-3[href$='" + link + "']").addClass("visited");
    });
  };

  $("a.style-3").on("click", function(e) {
    if (!/visited/.test(e.target.className)) {
      $(e.target).addClass("visited");
      var visits = JSON.parse(localStorage.getItem("visited"));
      // if `hash` not within `visits` , push `hash` to `visits`
      if (visits.indexOf(e.target.hash) === -1) {
        visits.push(e.target.hash);
        localStorage.setItem("visited", JSON.stringify(visits));
      };
    }
  });

});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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 4

这很容易，如果你旁边有一个跨度：

*, *: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 中起作用！