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.

I want to show "Seen" if link is visited but :visited::before isn't working.

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

It may be possible, but don't take it for granted. According to the spec,

Note: It is possible for style sheet authors to abuse the :link and :visited pseudo-classes to determine which sites a user has visited without the user's consent.

UAs may therefore treat all links as unvisited links, or implement other measures to preserve the user's privacy while rendering visited and unvisited links differently.

Inserting content can change the size of the element, so it would be trivial to detect this and know if the user has visited some sites. Therefore, most browsers won't allow you to do so.