CSS：在父元素之后

Question

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

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

但我希望红色背景（:after）位于父元素后面。 所以我已将:after添加到父级，position: relative添加到伪元素。

尝试存档我已使用此代码：

＆＃13;

＆＃13;

absolute

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;

奇怪的是，上面的片段就像​​魅力一样。但是在我的live example中，完全相同的代码显示为此主题中的图像..有人知道实时网站有什么问题吗？

Answer 1

在您的网站中，您有以下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检查器进行了尝试，这似乎解决了这个问题。

Answer 2

如果您将其父元素包装在另一个元素中，可以将: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回答中的box-shadow解决方案会更适合这种特定情况，不确定它如何适合您网站的其他部分。

Answer 3

:before或:after伪元素被视为child element，由于元素的堆叠上下文，:after元素不能为{{}以这种方式。

但是，您可以使用box-shadow创建一个可实现您想要效果的实体“边框”。这是一个例子：

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