显示并正确堆叠:: after伪元素

Question

我正在尝试使用::after伪元素向横幅文字添加橙色重音。

目标：

我遇到两个问题：

• 获取:after以在内容为空时显示

• 在父元素和图像之间堆叠:after。我尝试指定z-indexes

（我通过放置伪内容强迫:after出现，从而显示了堆叠问题）

html

<div className="hero-banner">
      <div className="hero-banner-content">
        <img src={img0} alt="image"/>
        <div className="hero-banner-text">
          <span className="highlighted">Master</span>
          <span>the art of performance</span>
        </div>
      </div>
    </div>

scss

.hero-banner {
  position: relative;
  top: 0;
  left: 0;
  height: 100vh;
  .hero-banner-content {
    position: relative;
    top: -70px;
    width: 100%;
    img {
      object-fit: cover;
      width: 100%;
      height: 100vh;
      z-index: 1;
    }
    .hero-banner-text {
      padding: 0 24px;
      color: #FFFFFF;
      font-size: 54px;
      font-weight: $fw-bold;
      width: 361px;
      position: absolute;
      top: 237px;
      left: 192px;
      .highlighted {
        font-size: 96px;
        display: block;
      }
      > * {
        text-transform: uppercase;
        z-index: 4;
      }
      &:after {
        content: "_____";
        height: 32px;
        width: 200px;
        background-color: $orange;
        opacity: 0.4;
        position: relative;
        top: 32px;
        left: -432px;
        z-index: 2;
      }
    }
  }
}