title: prevent a pseudo element from triggering hover?
body: <p>If I have markup:</p>
  
  <pre><code>&lt;div class="a b"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>where the .a class has a hover class associated with it</p>
  
  <p>and the .b class has a pseudo element associated with it... like so:</p>
  
  <pre class="lang-css prettyprint-override"><code>div
  {
      width: 100px;
      height: 100px;
  }
  .a { background: red; display: inline-block; }
  .a:hover { background: green; }
  
  .b:after
  {
      content: '';
      display: inline-block;
      width: 100px;
      height: 100px;
      margin-left: 100px;
      background: pink;
  }
  </code></pre>
  
  <p>Is it possible with css to prevent a pseudo element from triggering the .a class hover?</p>
  
  <p><strong><a href="http://jsfiddle.net/danield770/jZ4Sb/">FIDDLE</a></strong></p>