:before/:after 伪元素不随父元素转换

Question

在这个Link 中，我有一个在悬停时旋转的 div，我想知道是否可以使用 :before 或 :after 来充当阴影。在示例中，:before 元素与 div 一起转换并出现在顶部，即使它的 z-index 为负。我希望它在没有任何转变的情况下被搁置。

这都是关于 css 的，html 只是两个 div，一个用于透视的容器和正在转换的“卡片”。

<div id="container">
    <div id="card"></div>
</div>

关于兼容性，这是我正在尝试实现的仅限 webkit 的实验。

Answer 1

检查这个答案：Z-index with before pseudo-element

:before 和 :after 伪元素定义为 inside 关联元素，因此不可能将它们放置在关联元素的外部（后面）。

您必须在 <div id="card"> 之前插入第二个元素（如 <div id="shadow">）。