Element.pseudo() — Methode · JavaScript-Referenz

Signatur

Element.prototype.pseudo(type)

Beschreibung

Mit pseudo() greift man aus JavaScript direkt auf ein CSS-Pseudo-Element wie ::before, ::after oder ::marker zu. Pseudo-Elemente sind keine echten DOM-Knoten. Bisher konnte man sie nur indirekt erreichen, etwa mit getComputedStyle(el, "::before") oder über die Option pseudoElement von Element.animate(). pseudo() liefert dafür ein eigenes Objekt vom Typ CSSPseudoElement.

Das zurückgegebene CSSPseudoElement erbt von EventTarget und hat unter anderem die Eigenschaften type (z. B. "::before") und element (das zugehörige Ursprungselement). So lässt sich das Pseudo-Element eindeutig ansprechen, z. B. um es an andere APIs zu übergeben oder um später Ereignisse darauf zu behandeln.

Wichtig: Die Methode gibt das Objekt auch dann zurück, wenn das Pseudo-Element gerade gar nicht dargestellt wird, etwa weil keine content-Regel greift. Für denselben Typ liefert sie bei wiederholten Aufrufen immer dasselbe Objekt. Ist type kein gültiger oder kein unterstützter Pseudo-Element-Selektor, gibt sie null zurück.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Selektor des Pseudo-Elements mit doppeltem Doppelpunkt, z. B. `"::before"`, `"::after"` oder `"::marker"`. Ungültige oder nicht unterstützte Werte führen zu `null`.

Rückgabewert

Typ

CSSPseudoElement | null

Beschreibung

Ein CSSPseudoElement, das das Pseudo-Element des Elements darstellt. Für denselben Typ ist es immer dasselbe Objekt. Bei ungültigem oder nicht unterstütztem type ist der Rückgabewert null.

Beispiele

Unterstützung prüfen und ::before abrufen

const button = document.querySelector('button');

if (typeof button.pseudo === 'function') {
  const before = button.pseudo('::before');
  console.log(before?.type);                // Typ des Pseudo-Elements
  console.log(before?.element === button);  // Verweis auf das Ursprungselement
} else {
  console.log('Element.pseudo() wird nicht unterstützt');
}

::before true (oder: Element.pseudo() wird nicht unterstützt)

Ungültige Typen und gleichbleibende Objekte

const item = document.querySelector('li');

if (item.pseudo) {
  console.log(item.pseudo('::marker') === item.pseudo('::marker')); // dasselbe Objekt
  console.log(item.pseudo('before'));   // fehlender Doppelpunkt
  console.log(item.pseudo('::foo'));    // unbekanntes Pseudo-Element
}

true null null

Rückfall auf getComputedStyle für Stilwerte

const badge = document.querySelector('.badge');

// Stilwerte eines Pseudo-Elements auslesen (funktioniert in allen Browsern)
const readPseudoContent = (el, type) => {
  const pseudoEl = el.pseudo?.(type) ?? null; // falls verfügbar, als Objekt merken
  const content = getComputedStyle(el, type).content;
  return { pseudoEl, content };
};

const { content } = readPseudoContent(badge, '::after');
console.log(content);

"\"Neu\"" (je nach CSS-Regel, sonst "none")

Pseudo-Element animieren (verbreitete Alternative)

const card = document.querySelector('.card');

// Element.animate() mit pseudoElement-Option wird deutlich besser unterstützt
card.animate(
  [{ opacity: 0 }, { opacity: 1 }],
  { duration: 400, pseudoElement: '::before', fill: 'forwards' }
);

// Wichtig · Fallstricke

Experimentell: Element.pseudo() und CSSPseudoElement sind in keinem Browser als Baseline verfügbar. Firefox hatte sie früher nur hinter einem Flag. Vor dem Aufruf immer die Unterstützung prüfen (typeof el.pseudo === 'function') und für den Produktivbetrieb auf getComputedStyle(el, '::before') oder el.animate(..., { pseudoElement }) ausweichen.
Der Typ muss mit doppeltem Doppelpunkt angegeben werden. Die alte Schreibweise mit einem Doppelpunkt (":before") oder ein Wert ganz ohne Doppelpunkt ergibt null.
Das Objekt existiert auch dann, wenn das Pseudo-Element nicht dargestellt wird. Ein Rückgabewert ungleich null heißt also nicht, dass ::before sichtbar ist. Das lässt sich über getComputedStyle(el, '::before').content !== 'none' prüfen.
Stile setzen kann man über CSSPseudoElement nicht (es gibt kein style). Pseudo-Elemente gestaltet man weiterhin mit CSS-Regeln, CSS-Variablen oder Klassen am Ursprungselement.

Siehe auch

Element.animate() Element CSSPseudoElement.pseudo() new Magnetometer() Element.append()