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 ⁨September 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; }

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();