Тень с CSS «после» псевдоэлементов

Question

Я хочу разместить изогнутую тень под моим DIV-контейнером, если я нахожусь на DIV. К сожалению, тень выше моего ящика, а не ниже. Какие-либо предложения?

Это мой 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

Он должен выглядеть следующим образом:

Answer 1

Согласно этому ответу: z-index canceled by transform вам нужно T o измените разметку.

<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> 

а затем использовать преобразование: шкала (1.1) на обертке назначения.

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

Таким образом .appointment и это псевдо элементы совместно используют один и тот же контекст стэка.

EDIT: Имейте в виду, что псевдоэлементы также преобразуются.