title: How does the z-index in :after work
body: <p>I have this nice css3 post-it (<a href="http://jsfiddle.net/Uum95/" rel="nofollow">JSFiddle</a>). However, in my application they can sometimes be on top of each other, like this: <a href="http://jsfiddle.net/Uum95/1/" rel="nofollow">JSFiddle1</a> </p>
  
  <p>As you can see, the shadow of the post-it is gone (it's behind the other one).
  So, for the post-it on top, I added the following styles (I increased the <code>z-index</code>):</p>
  
  <pre><code>.on-top {
      z-index: 11;
  }
  .on-top:after {
      z-index: 10;
  }
  </code></pre>
  
  <p>Checkout this <a href="http://jsfiddle.net/Uum95/2/" rel="nofollow">JSFiddle2</a> for the result. For some reason the shadow <code>:after</code> part is now on top of the post-it. It seems that the <code>z-index: 11</code> doesn't work. Any suggestions?</p>