title: Why ::before pseudo-element not working with :visited pseudo-class?
body: <p>I'm trying to style my element with pseudo-class and pseudo-element. like <code>hover::before</code> is working perfectly but <code>:visited::before</code> is not working.</p>
  
  <p><img src="https://i.stack.imgur.com/TAL3s.gif" alt="enter image description here"></p>
  
  <p>I want to show "Seen" if link is visited but <code>:visited::before</code> isn't working.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*, *: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;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="#1" class="style-3"&gt;Seen Effects&lt;/a&gt;
  &lt;a href="#2" class="style-3"&gt;Seen Effects&lt;/a&gt;
  &lt;a href="#3" class="style-3"&gt;Seen Effects&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>