I have an h1 element that I want to be invisible and then appear after a few seconds. The element has an ::after pseudo-element that displays a data-text attribute that shadows the h1 element. When I add the animation, I only see the h1 and not the pseudo-element as well. Here is my code

EDIT adding the animation to the pseudo-element makes it appear, but now the data-text appears over the h1 element when originally it is supposed to go behind it. Here are some pic of what is happening. The first is what it is doing and the second is what I want.

EDIT 2 The problem can be recreated by removing the z-index on the pseudo-element.

  <section class="wrapper">
        <div class="content-wrapper">
            <img class="flipInY" src="./img/neon-blue - flip.png" alt="logo-triangle">
            <h1 class="name-ani" data-text="My Name">My Name</h1>
            <h2 data-text="web-dev">Web Developer</h2>
        </div>
    </section>



.wrapper {
  .content-wrapper {
    z-index: 0;
    position: relative;
    display: grid;
    justify-items: center;
    margin-top: 20vh;
    img {
      width: 350px;
      max-width: 100%;
      padding: 0 32px;
      // transform: rotate(180deg);
      filter: brightness(85%);
      position: relative;
    }
    h1 {
      background: linear-gradient(
        to bottom,
        #ebf1f6 0%,
        #abd3ee 50%,
        #859ee2 51%,
        #d5ebfb 100%
      );
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      font-family: kimberly;
      text-transform: uppercase;
      font-size: 2.25rem;
      transition: font-size 1s;
      position: absolute;
      top: 10%;
      opacity: 0;
      &::after {
        background: none;
        content: attr(data-text);
        left: 0;
        position: absolute;
        text-shadow: 1px -1px 0 rgba(255, 255, 255, 0.5),
          3px 1px 3px rgba(255, 0, 255, 0.85),
          -3px -2px 3px rgba(0, 0, 255, 0.85),
          1px -2px 0 rgba(255, 255, 255, 0.8);
        z-index: -10;
        opacity: 0;
      }
    }

.name-ani {
  animation-name: name-ani;
  animation-duration: 250ms;
  animation-delay: 4.5s;
  animation-fill-mode: forwards;
}

@keyframes name-ani {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}