Nested pseudo elements ::before & ::after not working with @keyframes animation

Question

I am trying to apply a cool "Glitch Effect" I saw in this video here:

However, I cannot seem to get this animation to work. Here is the heading element I am trying to apply the effect to:

<h1 class="header-block-heading-primary">Web Developer</h1>

Here is the SCSS:

.header-block-heading-primary {
  // animation: glitch-effect 3s infinite;
  position: relative;

  &::before,
  &::after  {
    position: absolute;
    left: 0;
    top: 0;

    content: "";
    display: block;
    height: 100%;
        width: 100%;
        z-index: -1;
  }

  &::before {
    color: red;
    animation: glitch-effect 3s infinite;
  }

  &::after {
    color: blue;
    animation: glitch-effect 2s infinite;
  }
}

Here is the animation:

@keyframes glitch-effect {
  0% {
    left: -3px;
    top: -3px;
  }

  25% {
    left: 3px;
    top: 0px;
  }

  50% {
    left: -2px;
    top: 3px;
  }

  75% {
    left: 2px;
    top: -2px;
  }

  100% {
    left: 0px;
    top: -3px;
  }
}

And here is the outputted CSS:

.header-block-heading-primary {
  position: relative;
}

.header-block-heading-primary::before,
.header-block-heading-primary::after {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  z-index: -1;
}

.header-block-heading-primary::before {
  color: red;
  -webkit-animation: glitch-effect 3s infinite;
  animation: glitch-effect 3s infinite;
}

.header-block-heading-primary::after {
  color: blue;
  -webkit-animation: glitch-effect 2s infinite;
  animation: glitch-effect 2s infinite;
}

I have followed the same setup as the tutorial, and even referenced some old projects of mine looking at the use of ::before and ::after and they work just fine with the practically the same code (for the pseudo elements).

I have tried just single semi-colon, so :before & :after, and that did not work. I added the animation directly to the element itself (as seen by the commented out // animation: glitch-effect 3s infinite; underneath the .header-block-heading-primary selector), and it works fine so I'm being led to believe the ::before and ::after elements are not working. Also manually adding -webkit- in the nested SCSS did not work either.

I have looked at multiple other posts here on the site and could not find a answer that helped me solve this problem. So any help with this would be greatly appreciated!

Answer 1

your animations is working but you need to set ::after and ::before content:"Web Developer". you can show the effect in snippet.

.header-block-heading-primary {
  position: relative;
}

.header-block-heading-primary::before,
.header-block-heading-primary::after  {
  position: absolute;
  left: 0;
  top: 0;
  content: "Web Developer";
  display: block;
  height: 100%;
  width: 100%;
  z-index: -1;
}

.header-block-heading-primary::before {
  color: red;
  animation: glitch-effect 3s infinite;
}

.header-block-heading-primary::after {
  color: blue;
  animation: glitch-effect 2s infinite;
}
@keyframes glitch-effect {
  0% {
    left: -3px;
    top: -3px;
  }

  25% {
    left: 3px;
    top: 0px;
  }

  50% {
    left: -2px;
    top: 3px;
  }

  75% {
    left: 2px;
    top: -2px;
  }

  100% {
    left: 0px;
    top: -3px;
  }
}

<h1 class="header-block-heading-primary">Web Developer</h1>

this is the sass code this is working in my page please try this code.

.header-block-heading-primary {
  position: relative;
  &::before,
  &::after  {
    position: absolute;
    left: 0;
    top: 0;
    content: "Web Developer";
    display: block;
    height: 100%;
    width: 100%;
    z-index: -1;
  }
  &::before {
    color: red;
    animation: glitch-effect 3s infinite;
  }
  &::after {
    color: blue;
    animation: glitch-effect 2s infinite;
  }
}
@keyframes glitch-effect {
  0% {
    left: -3px;
    top: -3px;
  }

  25% {
    left: 3px;
    top: 0px;
  }

  50% {
    left: -2px;
    top: 3px;
  }

  75% {
    left: 2px;
    top: -2px;
  }

  100% {
    left: 0px;
    top: -3px;
  }
}

Thank you.