CSS :在父元素之后

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

:before 或 :after 伪元素以这种方式被视为 child element, and due to the stacking context of the elements, an :after element can't be displayed behind its parent。

但是，您可以使用 box-shadow 创建实体 'border' 来达到您想要的效果。这是一个例子：

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

Answer 2

在您的网站中，您有以下 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 3

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

CSS :在父元素之后

CSS :after behind parent element

css

z-index

behind