Why ::before pseudo-element not working with :visited pseudo-class?

Question

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.

Answer 1

Try utilizing className to apply visited class , css :before properties to clicked a elements; localStorage to store hash of clicked a.style-3 elements. If a.style-3 element clicked, maintain visited class using stored hash within 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;
    }

Seen Effects
Seen Effects
Seen Effects