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

概述如果我在DIV上盘旋,我想在我的DIV-Container下面放一个弯曲的阴影.不幸的是,影子在我的盒子上面而不是在下面.有什么建议？ 这是我的CSS： .appointment { position: relative; z-index: 1000; padding: 5px; border: 1px solid #BBBBBB; cursor: poin 如果我在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：

<div >    <div >        <div >07.10.2014</div>        <div >BAmberg,Bayern</div>    </div></div><div  >    <div >        <div >08.10.2014</div>        <div >Hamburg,Hamburg</div>    </div></div>

JSFiddle

它应该如下所示：

解决方法 根据这个答案： z-index canceled by transform你需要改变你的标记.

<div >    <div >        <div >            <div >07.10.2014</div>            <div >BAmberg,Bayern</div>        </div>    </div> </div>

然后在约会包装器上使用transform：scale(1.1).

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

这种方式.appointment和它的伪元素共享相同的堆叠上下文.

编辑：请注意伪元素也会被转换.

总结

以上是内存溢出为你收集整理的html – 带有CSS的阴影“在”伪元素之后全部内容，希望文章能够帮你解决html – 带有CSS的阴影“在”伪元素之后所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。