KeyframeEffect : la proprit pseudoElement

<div id="monTexte">Du texte</div>
<pre id="journal"></pre>

#monTexte::after {
  content: "";
  display: inline-block; /* Ncessaire car la proprit `transform` ne
                            s'applique pas aux lments inline */
  font-size: 2rem;
}
#monTexte::before {
  content: "";
  display: inline-block;
  font-size: 2rem;
}

const journal = document.getElementById("journal");
const monTexte = document.getElementById("monTexte");

// Cre l'animation
const animation = monTexte.animate([{ transform: "rotate(360deg)" }], {
  duration: 3000,
  iterations: Infinity,
  pseudoElement: "::after",
});

// Lit la valeur de KeyframeEffect.pseudoElement
function logPseudoElement() {
  const keyframeEffect = animation.effect;
  journal.textContent = `Valeur du pseudoElement anim : ${keyframeEffect.pseudoElement}`;
  requestAnimationFrame(logPseudoElement);
}

// Toutes les 6 secondes, bascule le pseudo-lment anim actif
function switchPseudoElement() {
  const keyframeEffect = animation.effect;
  keyframeEffect.pseudoElement =
    keyframeEffect.pseudoElement === "::after" ? "::before" : "::after";
  setTimeout(switchPseudoElement, 6000);
}

switchPseudoElement();
logPseudoElement();