Tengo un elemento h1 que quiero que sea invisible y luego aparezca después de unos segundos. El elemento tiene un pseudoelemento ::after que muestra un atributo de texto de datos que sombrea el elemento h1. Cuando agrego la animación, solo veo el h1 y no el pseudo-elemento también. Aquí está mi código

EDITAR agregar la animación al pseudoelemento hace que aparezca, pero ahora el texto de datos aparece sobre el elemento h1 cuando originalmente se suponía que debía ir detrás de él. Aquí hay algunas fotos de lo que está sucediendo. El primero es lo que está haciendo y el segundo es lo que quiero.

EDITAR 2 El problema se puede recrear eliminando el índice z en el pseudoelemento.

 <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; } }