title: Shadow with CSS "after" pseudo-elements
body: <p>I wish like to place a curved shadow under my DIV-Container if i hover on the DIV. Unfortunately the shadow is above my box and not below. Any suggestions?</p>
  
  <p>This is my CSS:</p>
  
  <pre><code>.appointment {
      position: relative;
      z-index: 1000;
      padding: 5px;
      border: 1px solid #BBBBBB;
      cursor: pointer;
      transition: all 0.5s;
      background: #FFFFFF;
  }
  
  .appointment:hover {
      transform: scale(1.1);
  }
  
  .appointment:hover:after {
      content:'';
      position: absolute;
      z-index: -1;
      top: 20px;
      width: 100px;
      height: 45px;
      background: #000000;
      transform: rotate(-5deg);
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="appointment"&gt;
      &lt;div class="desc"&gt;
          &lt;div class="app-date"&gt;07.10.2014&lt;/div&gt;
          &lt;div class="app-location"&gt;Bamberg, Bayern&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="appointment" &gt;
      &lt;div class="desc"&gt;
          &lt;div class="app-date"&gt;08.10.2014&lt;/div&gt;
          &lt;div class="app-location"&gt;Hamburg, Hamburg&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/yw035wz8/3" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <p>It should look like this:
  <img src="https://i.stack.imgur.com/mehgH.png" alt="Curved Shadow"></p>