title: User-select not working on a:visited
body: <p>I'm working on a Math website, and it has some exercises on it with solutions on the bottom of the page. I want to make so solutions are hidden when the user scrolls by them, and needs to click on the block for it to show the answer. I want to achieve this using only css and html. Here's what I have made so far:<br/></p>
  
  <h2>HTML:<br/></h2>
  
  <pre><code>&lt;div class="solution s1"&gt;
    &lt;a href="#s1"&gt;2+2=4&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>CSS:</h2>
  
  <pre><code>.solution {
    width:80%;
    margin:25px auto;
  }
  
  .solution a:visited{
    color:black;
    background-color:white;
    user-select:text;
  }
  
  .solution a{
    background-color:#49FF59;
    display:block;
    width:100%;
    padding:25px;
    text-align:center;
    color:#49FF59;
    text-decoration:none;
    user-select: none;
  }
  </code></pre>
  
  <p>This code works great, except for the user-select. I want it so that the user can't copy the solution, before the block is clicked on. But the <code>a:visited</code> won't apply the <code>user-select:text;</code> I have tried to add more classes, but i wasn't able too fix it. Keep in mind most of the CSS is for asterisk. </p>