CSS :after伪元素在父元素后面显示

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>

奇怪的是，上面的代码片段能够完美运行。但在我的实际示例中，完全相同的代码显示为该主题中的图像。有人知道实际站点的问题吗？

- ronnyrr

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; */
}

然而，在Timothy M的回答中提供的box-shadow解决方案可能更适合这种特定情况，不确定它是否与您网站的其余部分相匹配。

- Slavenko Miljic

Answer 2

一个:before或:after伪元素被认为是子元素，由于元素的堆叠上下文，:after元素不能以这种方式显示在其父元素后面。

但是，您可以使用box-shadow创建实心“边框”，从而实现您想要的效果。以下是一个示例：

.btn{
  box-shadow: red 6px 7px 0 0;
}

- timothym

Answer 3

在您的网站中，有以下CSS规则：

.btn {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: .8rem 1rem;
  font-size: 1rem;
  background: #000;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

如果您删除z-index: 1属性，您的CSS将正常工作。 在您提供的示例片段中没有此属性。 我使用Firefox中的CSS检查器尝试了一下，似乎可以解决问题。

- Marc Audet

---

谢谢您的回复。我稍后在我的实际网站中添加了z-index，看看它是否有任何区别。我将不得不在按钮的父容器上再放置一个z-index，以使其像您的网站一样工作，而不是在按钮本身上。问题解决了，谢谢！ - ronnyrr