W3cubDocs

/Web APIs

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).

Value

A string or null.

Exceptions

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.

Examples

html

<div id="text">Some text</div>
<pre id="log"></pre>

css

#text::after {
  content: "⭐";
  display: inline-block; /* Needed as the `transform` property does not apply to inline elements */
}
#text::before {
  content: "😊";
  display: inline-block;
}

js

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}`;
  requestAnimationFrame(logPseudoElement);
}

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

switchPseudoElement();
logPseudoElement();

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
pseudoElement 84 84 75 No 71 14 84 84 79 60 14 14.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/pseudoElement