::after 选择器影响另一个 ::after 选择器 - 这是一个错误吗？

Question

这个问题看起来超级奇怪。我正在使用 ::after 选择器在标题下添加一条金线，但它也会影响不透明度渐变 div（黄色 div），并在标题的底部添加一条黑线div。截屏：

我的 html 和 css:

.audio-caption-background {
  background-color: black;
  width: 100%;
  height: 50px;
  position: absolute;
  top: 0;
  z-index: 2;
  mix-blend-mode: hard-light;
}

.audio-caption-background::after {
  position: absolute;
  content: "";
  left: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
  background: linear-gradient(to right, transparent, yellow);
  border: none;
}

.page-title {
  text-align: center;
  margin: 0 auto;
  color: rgb(77, 77, 77);
}

.page-title::after {
  display: block;
  content: "";
  background-color: #CC9752;
  height: 3px;
  width: 70px;
}

<div class="container">
  <div class="row">
    <h1 class="page-title">TITLE</h1>
  </div>
  <div class="col-lg-6">
    <div class="audio-caption-background">
    </div>
  </div>
</div>

我删除 .page-title class 黄色 div 下的黑色边框消失了。另外，如果我删除 bootstrap classes 它也可以解决问题。这是为什么？我不喜欢黄色底下的黑色边框 div。

Answer 1

我通过将 .audio-caption-background::after 的 width 和 height 更改为 calc(100% + 1px) 并将 overflow: hidden 添加到 .audio-caption-background 来解决问题。

您也可以删除 .audio-caption-background::after css，然后将 background: linear-gradient(to right, black, yellow); 放入 .audio-caption-background。

Answer 2

另一种选择是简单地将 border-bottom: 3px solid yellow; 添加到您的标题中，而不是使用 ::after 来完成相同的工作。您可以通过在 border-bottom.

上稍微摆弄一下来消除 ::after

::after 选择器影响另一个 ::after 选择器 - 这是一个错误吗？

::after selector affects another ::after selector - is this a bug?

html

css

pseudo-element

twitter-bootstrap