4

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

的背景: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>

奇怪的是，上面的代码片段就像魅力一样。但在我的实时示例中，显示的代码与本主题中的图像完全相同。有人知道实时站点有什么问题吗？

4

3 回答 3

4

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

于 2015-12-09T22:55:15.463 回答
3

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

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

.btn{
  box-shadow: red 6px 7px 0 0;
}
于 2015-12-09T22:50:08.457 回答
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 检查器进行了尝试，这似乎解决了这个问题。

于 2015-12-09T22:54:23.297 回答