html让字后面有阴影,html – 带有CSS的阴影“在”伪元素之后

如果我在DIV上盘旋,我想在我的DIV-Container下面放一个弯曲的阴影.不幸的是,影子在我的盒子上面而不是在下面.有什么建议？

这是我的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：

它应该如下所示：