Почему: перед псевдоэлементом, не работающим с: посещенным псевдо-классом?

Ответ 1

Mozilla Developer Network: посетил, говорит

Примечание. В целях конфиденциальности браузеры строго ограничивают стили, которые вы можете применить, используя элемент, выбранный этим псевдоклассом: только цвет, цвет фона, цвет границы, границы нижнего цвета, границы с левым цветом, border-right-color, border-top-color, outline-color, colour-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;
}

Fiddle https://jsfiddle.net/ZigmaEmpire/do8yeLm1/

Идея 2: создать прозрачное фоновое изображение с текстом, соответствующим цвету фона, и изменить цвет фона для: посещенных (не рекомендуется)

Ответ 2

Это возможно, но не воспринимайте это как должное. Согласно спецификации,

Примечание: авторам стилей можно злоупотреблять ссылкой: и: посещенные псевдоклассы, чтобы определить, какие сайты посетил пользователь без согласия пользователя.

Таким образом, UA могут обрабатывать все ссылки как невидимые ссылки или внедрять другие меры по сохранению конфиденциальности пользователя при рендеринге и нераскрытые ссылки по-разному.

Вставка содержимого может изменить размер элемента, поэтому было бы тривиально обнаружить это и узнать, посетил ли пользователь некоторые сайты. Поэтому большинство браузеров не позволят вам это сделать.

Ответ 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>

Ответ 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>