Custom CSS Border Effects

Ignition
1

I am trying to replicate an animated gradient border similar to the one in this YouTube video, but I ran into issues getting it to render properly. Hopefully someone here can point me in the right direction.

It generates the ::before/after sudo elements in the HTML but the only way I can get it to render is if I change the z-index on the sudo elements (IT has blocked my ability to upload pictures, but ill post the HTML below), but then it overlays the label. I tried playing with the z-index on both the sudo elements and the class, but I didn't have any luck.
I have a style class of 'ItemSelected' under the label component (have also tried a container).
I have this working in VSCode, and the HTML is generated in a similar manner.

Here is my advanced stylesheet:

@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

:root {
  --clr-1: #052b2f;
  --clr-2: #073438;
  --clr-3: #0e4b50;
  --clr-4: #2d8f85;
  --clr-5: #637c54;
}

.psc-ItemSelected {

  position: relative;
}

.psc-ItemSelected::before,
.psc-ItemSelected::after {
  content: '';
  position: absolute;
  inset: -.2rem;
  z-index: -1;
  background: conic-gradient(
    from var(--gradient-angle),
    var(--clr-3),
    var(--clr-4),
    var(--clr-5),
    var(--clr-4),
    var(--clr-3)
  );
  border-radius: inherit;
  animation: rotation 1s linear infinite;
}

.psc-ItemSelected::after {
  filter: blur(.5rem);
}

@keyframes rotation {
  0% {
    --gradient-angle: 0deg;
  }
  100% {
    --gradient-angle: 360deg;
  }
}

Generated HTML:
*the ::before/after are inside the div. Devtools doesnt copy it out.

<div data-component="ia.display.label" data-component-path="C.0:0" class="psc-ItemSelected ia_labelComponent" style="background-color: rgb(255, 255, 255); text-align: center; display: flex; flex-direction: column; justify-content: flex-end; flex: 0 0 80px;"><span>Animate Me</span></div>