伪元素 ::before 和 ::after 的 z-index 问题

Question

我正在尝试制作 3d 图层（矩形），其中一段文本将穿过图层。但是，我不明白为什么 z-index 不会在 ::before 和 ::after 上更新。我读过这可能与 position: absolute 有关，但是当我将伪元素设置为 position:relative 时，它​​们不再显示

这是我目前拥有的模板

<div class="container">
  <div class="section--quote__quote">
    Some Text Here
  </div>
  <div
    v-observe-visibility="visibilityChanged"
    class="section--quote__graphic"
   >
     <div v-for="i in 5" :key="`layer--${i}`" class="layer" />
  </div>
</div>

这是我的样式 lang="scss"

.section--quote__container {
    flex-basis: 50%;
    position: relative;

    @media (min-width: $breakpoint-tablet) {
      padding-right: 120px;
    }

    .section--quote__graphic {
      margin-top: -20vw;
      height: 75vw;

      @media (min-width: $breakpoint-tablet) {
        padding-top: 0;
        margin-top: -50px;
        height: auto;
      }
    }

    .section--quote__quote {
      font-family: $wide;
      margin: 0 50px;
      font-size: 6vw;
      letter-spacing: -0.94px;

      @media (min-width: $breakpoint-tablet) {
        font-size: 26px;
        margin: 200px 50px auto 50px;
      }
    }
  }
.layer {
  display: block;
  width: 40vw;
  height: 60vw;
  margin: 0 auto -55vw auto;
  transform: rotate(-50deg) skew(10deg, 20deg);

  &::before {
    content: '';
    width: inherit;
    height: inherit;
    position: absolute;
    border-top: solid 1.5px $gray-l;
    border-right: solid 1.5px $gray-l;
    z-index: -1;
  }

  &::after {
    content: '';
    width: inherit;
    height: inherit;
    position: absolute;
    border-bottom: solid 1.5px $gray-l;
    border-left: solid 1.5px $gray-l;
    z-index: 1;
  }

  @media (min-width: $breakpoint-tablet) {
    width: 13vw;
    height: 23vw;
    margin-bottom: -25vw;
  }