CSS：在父元素之后 [英] CSS :after behind parent element

问题描述

是否可以在其父元素的背景后面获取CSS伪：after 元素？

：after 的背景包含与父元素的背景相同的尺寸。因此，当前看起来像这样：

但是我希望红色背景（：after ）放在父元素后面。
因此，我在父元素中添加了位置：相对，在伪元素中添加了绝对。

尝试将其存档，我使用了以下代码：

  .btn {位置：相对；显示：inline-block;填充：.8rem 1rem;字体大小：1rem；背景：＃000;}。btn：之后{位置：绝对；底部：-0.3rem;右：-0.3rem； z索引：-1；宽度：100％;高度：100％;内容：'';背景：红色；}  

 < a href = class = btn>这是我的按钮< / a>  

奇怪的是上面的代码片段就像魅力一样。但是在我的实时示例中，完全相同的代码显示为该主题中的图像。.有人知道这是错误的

解决方案

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

  .btn {
职位：相对； 
 z-index：1； 
显示：inline-block; 
 padding：.8rem 1rem; 
 font-size：1rem; 
背景：＃000； 
 -webkit-transition：全部为0.2s线性; 
 -moz-transition：全部为0.2s线性； 
 -o-transition：全部为0.2s线性； 
过渡：全部为0.2s线性； 
} 
  

如果删除 z-index：1 属性，您的CSS将可以正常工作。
此属性不在上面提供的示例代码中。

我在Firefox中使用CSS检查器对其进行了尝试，似乎可以解决此问题。 / p>

Is it possible to get a CSS pseudo :after element behind the background of it's parent element?

The background of the :after contains equal dimensions as the parent element's background. So currently it looks like this:

But I want the red background (:after) to go behind the parent element. So I've added position: relative to the parent and absolute to the pseudo element.

Trying to archive this I've used this code:

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

The weird thing is that above snippet works like charm. But in my live example the exact same code displays as the image in this topic.. Someone knows what is wrong in the live site?

解决方案

In your website, you have the following CSS rule:

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

If you remove the z-index: 1 property, your CSS will work correctly. This property is not in the sample snippet that you provided above.

I tried it out using CSS inspector in Firefox and that seems to fix the issue.

这篇关于CSS：在父元素之后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！