:before 和 :after 伪元素表现出令人困惑的行为答案

【问题标题】：:before and :after pseudo-elements exhibiting confusing behavior:before 和 :after 伪元素表现出令人困惑的行为
【发布时间】：2018-07-28 13:27:04
【问题描述】：

我正在容器 div 上实现一个 ::after 伪元素。伪元素设置背景颜色，顶部 0，左侧 0，100% 的宽度和高度。在 div 内部，高度设置为 200px。这种 HTML/CSS 组合导致背景色覆盖了整个嵌套的 div，并指定了添加的高度和宽度。

但是，如果我删除 ::after，则会插入背景色，但不会在嵌套 div 的顶部，这似乎完全违反直觉。为什么使用::after（或::before）伪元素会导致内容覆盖嵌套div，而不使用它会导致嵌套div继续覆盖的顶部？ ::after 不应该意味着它在内容之后吗？

 .container1 {
    position:relative;
    height: 100%;
}

.overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  background-color: hsla(211, 100%, 18%,.6);
  z-index: 2;
  width: 100%;
  height: 100%;
}

#hero {
   height: 200px;
   background: url(https://preview.ibb.co/nRxrBS/hero_truck_lg.jpg) no-repeat;
}

<div class="container1 overlay">
    <div id="hero"></div>
</div>

【问题讨论】：

Before 和 after 是伪类选择器，前面应该有双冒号::before 和::after
在这种情况下没有区别
我知道，这只是为了通知您，因为在某些浏览器 (IE) 中无法按预期工作。最好使用标准
我只是想了解为什么 :after 和 :before 伪选择器会以这种方式运行。如果我希望背景出现在图像之前或之后，不应该使用 :before 或 :after 来完成吗？为什么使用那些仍然覆盖图像？
@jeprubio：它们被称为伪元素。那就是他们有双冒号的原因。伪类有单个冒号。将其更改为双冒号会使它们在旧版本的 IE 中无法按预期工作；留下单冒号是让它们正常工作的原因，因为旧版本的 IE 遵守 - 令人惊讶的 - 旧标准。我觉得有趣的是，您知道双冒号的存在是有原因的，但无论如何仍然设法使事情完全混淆。我开始认为将伪元素的标准更改为双冒号是一个错误。

标签： html css pseudo-element

【解决方案1】：

您有几个相互干扰的项目。但我认为你的主要问题是：

position:absolute; 将元素拉出渲染顺序，导致它们在静态元素之上渲染。

【讨论】：

但不应该 position:absolute 以相同的方式操作，而不取决于是否使用 :before 或 :after 伪选择器？
我会认为在这种情况下绝对位置只是意味着将叠加层绝对定位在相对定位的容器 div 内。
是的。它确实如此。绝对定位的伪元素总是最终呈现在静态定位的兄弟元素之上。
如果我删除 :after 伪选择器，它会呈现在下面。我不确定绝对定位是主要因素。
如果您删除::after，您将不再将规则应用于伪元素。在您的示例中，删除 ::after 会更改选择器，以便规则作用于 .overlay，这是父 div 上的一个类。