title: ::before pseudo-element with negative z-index not displaying behind parent
body: <p>I swear I've done this a hundred times, but for the life of me, I can't figure out why my <code>:before</code> pseudo-element's background is displaying behind the text but not behind the anchor's background. Thoughts?</p>
  
  <pre class="lang-css prettyprint-override"><code>.button {
      background: tomato;
      padding: 10px 30px;
      margin: 20px 0;
      display: inline-block;
  }
  
  .button:hover {
      margin: 18px 0 22px 2px;
      position: relative;
      z-index: 2;
  }
  
  .button:hover:after {
      position: absolute;
      background: red;
      top:-2px;
      left: -2px;
      content: "";
      z-index: -10;
      width: 100%;
      height: 100%;
  }
  </code></pre>
  
  
  
  <pre><code>&lt;a class="button" href="#"&gt;Meow&lt;/a&gt;
  </code></pre>
  
  <p>Sample here: <a href="http://jsfiddle.net/cfree/hnKLr/" rel="nofollow">http://jsfiddle.net/cfree/hnKLr/</a></p>