CSS :after behind parent element

Question

是否有可能在它的父元素的背景后面得到一个 CSS 伪 :after 元素？

:after 的背景包含与父元素背景相同的尺寸。所以目前它看起来像这样:

但我希望红色背景 (:after) 位于父元素的后面。所以我将 position: relative 添加到父元素，将 absolute 添加到伪元素。

尝试存档我使用了这段代码:

.btn {
  position: relative;
  display: inline-block;
  padding: .8rem 1rem;
  font-size: 1rem;
  background: #000;
}

.btn:after {
  position: absolute;
  bottom: -0.3rem; right: -0.3rem;
  z-index: -1;

  width: 100%; height: 100%;
  content:'';
  background: red;
}

<a href="" class="btn">
  This is my button
</a>

奇怪的是上面的代码片段很有魅力。但是在我的live example显示与本主题中的图像完全相同的代码。有人知道现场网站出了什么问题吗？

Answer 1

如果将其父级包装在另一个元素中，则可以将 :after 元素放在其父级之后。发生的情况是 :after 忽略了其父级的定位，但它将对层次结构中的下一个父级应用定位。

HTML

    <div class="wrap">
        <a href="" class="btn blue">
            <span>Bekijk op facebook</span>
            <span class="fa fa-arrow-circle-right"></span>
        </a>
    </div>

CSS

.wrap{
    position:relative;
    z-index:1;
}

.btn{
    /* remove position:relative; */
}

但是，timothym answer 中的 box-shadow 解决方案会更适合这种特定情况，不确定它是否适合您网站的其余部分。