KeyframeEffect: pseudoElement property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.

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 */
  font-size: 2rem;
}
#text::before {
  content: "🤠";
  display: inline-block;
  font-size: 2rem;
}
js
const log = document.getElementById("log");
const text = document.getElementById("text");

// Create the keyframe and launch the animation
const animation = text.animate([{ 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

Specification
Web Animations
# dom-keyframeeffect-pseudoelement

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
pseudoElement

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also