KeyframeEffect: pseudoElement property

The pseudoElement property of a KeyframeEffect interface is a string representing the pseudo-element being animated. It may be null for animations that do not target a pseudo-element. It performs as both a getter and a setter, except with animations and transitions generated by CSS.

Note: If set to the legacy single-colon syntax of :before, :after, :first-letter, or :first-line, the string is transformed into its double-colon modern version (::before, ::after, ::first-letter, and ::first-line, respectively).


A string or null.


SyntaxError DOMException

Thrown when trying to set this property to an element, an invalid pseudo-element (either non-existent or misspelled). The property is then left unchanged.


<div id="text">Some text</div>
<pre id="log"></pre>
#text::after {
  content: "⭐";
  display: inline-block; /* Needed as the `transform` property does not apply to inline elements */
#text::before {
  content: "😊";
  display: inline-block;
const log = document.getElementById("log");
const text = document.getElementById("text");

// Create the keyframe and launch the animation
const animation = text.animate(
    { transform: "rotate(0)" },
    { transform: "rotate(180deg)" },
    { transform: "rotate(360deg)" },
  { duration: 3000, iterations: Infinity, pseudoElement: "::after" }

// Get the value of KeyframeEffect.pseudoElement
function logPseudoElement() {
  const keyframeEffect = animation.effect;
  log.textContent = `Value of pseudoElement animated: ${keyframeEffect.pseudoElement}`;

// Every 6 seconds, switch the pseudo-element animated
function switchPseudoElement() {
  const keyframeEffect = animation.effect;
  keyframeEffect.pseudoElement =
    keyframeEffect.pseudoElement === "::after" ? "::before" : "::after";
  setTimeout(switchPseudoElement, 6000);



Web Animations
# dom-keyframeeffect-pseudoelement

Browser compatibility

BCD tables only load in the browser

See also