CSS shadow after pseudo-elements

Question

I want to place a curved shadow under my DIV container if I visit the DIV. Unfortunately, the shadow is higher than my drawer, not lower. Any suggestions?

This is my CSS:

.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);
}

HTML:

<div class="appointment">
    <div class="desc">
        <div class="app-date">07.10.2014</div>
        <div class="app-location">Bamberg, Bayern</div>
    </div>
</div>
<div class="appointment" >
    <div class="desc">
        <div class="app-date">08.10.2014</div>
        <div class="app-location">Hamburg, Hamburg</div>
    </div>
</div>

Jsfiddle

It should look like this:

Answer 1

According to this answer: z-index, canceled by conversion , you need to change your markup.

  <div class="appointment-wrapper">
    <div class="appointment">
        <div class="desc">
            <div class="app-date">07.10.2014</div>
            <div class="app-location">Bamberg, Bayern</div>
        </div>
    </div>
 </div>

and then use transform: scale (1.1) on the destination wrapper.

.appointment-wrapper:hover
{
  transform: scale(1.1);
}

This method .appointment, and its pseudo-elements, use the same stacking context.

EDIT . Remember that pseudo-elements are also converted.