title: Prevent style from applying to ::after
body: <p>Demonstration: <kbd><a href="http://jsfiddle.net/DerekL/85LNE/" rel="nofollow">http://jsfiddle.net/DerekL/85LNE/</a></kbd></p>
  
  <p>Right now I have the following CSS style applied to links to add separators:</p>
  
  
  
  <pre class="lang-css prettyprint-override"><code>div &gt; a{
      color: #2679c1;
      text-decoration: none;
  }
  div &gt; a:hover{
      color: #3096fb;
      text-decoration: underline;
  }
  div &gt; a:not(:last-child)::after{
      content: ' ‧ ';
  }
  </code></pre>
  
  <p>This works however when I hover over the link, the separator are also underlined. I was hoping by adding the following rule it would solve the problem, but it apparently has no effect:</p>
  
  <pre class="lang-css prettyprint-override"><code>div &gt; a:not(:last-child):hover::after{
      text-decoration: none;
  }
  </code></pre>
  
  <p>Any solutions? (I don't really want to wrap the content with a <code>&lt;span&gt;</code> because it defeats the purpose of using CSS to simplify the process of adding the separators.)</p>