为什么::在伪元素之前不能使用：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

这可能是可能的，但不要认为理所当然。根据{{​​3}}，

  

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

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

插入内容可以更改元素的大小，因此检测此内容并了解用户是否访问过某些网站会很简单。因此，大多数浏览器都不允许您这样做。

Answer 2

Mozilla Developer Network :visited说

注意：出于隐私原因，浏览器严格限制您可以使用此伪类选择的元素应用的样式：only color，background-color，border-color，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中有效！

Answer 4

尝试利用className将visited class，css :before个属性应用于点击的a元素; localStorage来存储点击的hash元素a.style-3。如果点击a.style-3元素，请使用visited中存储的class维护hash localStorage.visited

$(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>