带有 CSS “after” 伪元素的阴影答案

【问题标题】：Shadow with CSS "after" pseudo-elements带有 CSS “after” 伪元素的阴影
【发布时间】：2014-10-27 21:53:59
【问题描述】：

如果我将鼠标悬停在 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 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

它应该是这样的：

【问题讨论】：

有一个小提琴可以说明问题。
希望这个小提琴能解释一下：jsfiddle.net/yw035wz8/3
删除::after 并使用hover 和box-shadow 会更容易。
在.desc 元素上而不是.appointment 上放置一个z-index。
问题是：transform: scale(1.1);预约时：悬停，如果它被删除，它就会起作用。

标签： html css z-index pseudo-element

【解决方案1】：

根据这个答案：z-index canceled by transform 你需要改变你的标记。

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

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

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

这样.appointment 和它的伪元素共享相同的堆叠上下文。

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

【讨论】：

只是一个争论点：这并没有给出曲线。它只是旋转一个直边。
@TylerH 是的，你肯定是对的，我只是采用了 alexPs 方法并尝试修复它。