css 双层伪元素,CSS 伪元素:before&:after 与z-index 的那点事

最近要实现一个类似下面的层叠的效果，需要带一个hover 缓动效果。

第一反应就是直接使用:before&:after伪元素，配合绝对定位加z-index 轻松实现，实际操作发现并不是这么一回事。

代码如下

.box{

width:100px;

height:100px;

position:relative;

z-index:2;

box-shadow:0 3px 5px #eee;

background-color:#fff;

}

.box:before{

content:"";

position:absolute;

top:5px;

left:5px;

right:5px;

bottom:-5px;

box-shadow:0 3px 5px #eee;

background-color:#fff;

z-index:1;

}

但是得到的确实下面的效果