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

Question

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

jsfiddle：http://jsfiddle.net/6jn4yvuq/

我的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类的那一刻，黄色div下的黑色边框消失了。另外，如果删除引导程序类，它也可以解决该问题。 这是为什么？我不喜欢黄色div下的黑色边框。

Answer 1

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

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

Answer 2

另一种选择是简单地将border-bottom: 3px solid yellow;添加到标题中，而不使用::after来完成相同的工作。您只需稍微摆弄::after就可以消除border-bottom。