title: Why can't I override text-decoration for visited links?
body: <p>Please could someone explain why this doesn't seem to work? It's pretty straight-forward. I want links on the page to default to blue without an underline, and one they're clicked, I want it to change to purple with a line-through. However, my code doesn't work.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>a {
   text-decoration: none;
   color: blue;
  }
  
  a:visited {
   text-decoration: line-through;
   color: purple;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="http://www.google.com/" onclick="window.open(this.href); return false;"&gt;Google (click me)&lt;/a&gt; &amp;lt;-- Once clicked, it should have a line through it&lt;br&gt;
  &lt;!-- Had to add an onclick event as clicking the link doesn't seem to work without it --&gt;
  &lt;a href="http://some-random-non-existant-site.com/"&gt;Non-existant Site&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/thefuzzy0ne/hfqdsr4z/" rel="nofollow noreferrer">https://jsfiddle.net/thefuzzy0ne/hfqdsr4z/</a></p>
  
  <p>I've tried varying combinations of <code>text-decoration-line</code> and <code>text-decoration-style</code> and still nothing seems to work. I normally don't have much trouble with CSS, but this is driving me nuts.</p>