title: CSS: Absolutely positioned pseudo element loses z-index?
body: <p>Why would an absolutely positioned pseudo element be losing its <code>z-index</code> when using <code>transition</code>?</p>
  
  <p><strong>The fiddle:</strong>
  <a href="http://jsfiddle.net/RyanWalters/jNgLL/" rel="noreferrer">http://jsfiddle.net/RyanWalters/jNgLL/</a></p>
  
  <p><strong>What's happening?</strong>
  When you click on the <code>li</code>, it slides to the left without changing any <code>z-index</code> values. However, the <code>:after</code> content is popping up on top of the <code>li</code>.</p>
  
  <p><strong>What should happen?</strong>
  I was hoping it would stay hidden behind the <code>li</code>.</p>
  
  <p><strong>The CSS (simplified a little bit, see fiddle for full example):</strong></p>
  
  <pre><code>li {
      position: relative;
      transition: transform 0.2s;
  }
  
  li.active {
      transform: translateX(-100px);
  }
  
  li:after {
      position: absolute;
      top: 0;
      right: 0;
      z-index: -1;
      content: "Yada yada";
  }
  </code></pre>
  
  <p>Why is the <code>:after</code> content not staying behind the <code>li</code>?</p>