CSS ::before Pseudo-Element

Das CSS-::before-Pseudo-Element erstellt ein generiertes Element, das als erstes Kind des Zielelements eingefügt wird – vor dessen eigenem Inhalt. Es ist eines der beiden „Generated Content"-Pseudo-Elemente (sein Gegenstück ist ::after) und wird am häufigsten verwendet, um dekorative Icons, Beschriftungen, Zähler, Anführungszeichen oder visuelle Verzierungen hinzuzufügen, ohne das HTML zu verändern.

Diese Seite erklärt, was ::before bewirkt, welche Eigenschaft unverzichtbar ist, zeigt ausführbare Beispiele, die häufigsten Anwendungsmuster und wichtige Hinweise zur Barrierefreiheit.

So funktioniert `::before`

Ein ::before-Pseudo-Element wird nur gerendert, wenn Sie auch die Eigenschaft content deklarieren – dieser Wert ist das, was eingefügt wird. Ohne content erscheint nichts (nicht einmal eine leere Box).

Wichtige Verhaltensweisen:

Standardmäßig inline. Wie ein <span> sitzt es inline im umgebenden Text, bis Sie seinen display-Wert ändern (z. B. auf inline-block oder block).
Es ist eine echte Box. Sie können es wie jedes andere Element stylen, animieren, positionieren oder floaten, und es erbt Stile von dem Element, zu dem es gehört.
Es steht an erster Stelle. ::before wird vor dem Inhalt des Elements eingefügt; ::after wird danach eingefügt. Beide befinden sich innerhalb des Elements, zwischen seinen Tags.
Ein einzelner Doppelpunkt funktioniert noch. Die ältere :before-Syntax (ein Doppelpunkt) ist gleichwertig und wurde von sehr alten Browsern verstanden. Das doppelte ::before ist der moderne Standard, der Pseudo-Elemente von Pseudo-Klassen unterscheidet – bevorzugen Sie diese Schreibweise.

Info

::before und ::after funktionieren nicht bei ersetzten Elementen wie <br>, <img>, <input> oder <video>, da diese Elemente keinen Dokumentinhalt haben, um den herum generierter Inhalt eingefügt werden könnte.

Syntax

selector::before {
  content: "value"; /* required */
  /* other declarations */
}

Der content-Wert kann ein Literalstring, ein Bild (url(...)), ein Attributwert (attr(...)) oder ein Zähler sein (zusammen mit counter-increment verwendet). Für eine rein dekorative Box ohne Text verwenden Sie einen leeren String: content: "".

Beispiele

Textbeschriftung vor dem Inhalt einfügen

Hier stellt ::before jedem Absatz einen festen String voran:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::before { 
        content: "  William Shakespeare -";
      }
    </style>
  </head>
  <body>
    <h2>::before selector example</h2>
    <p>"Be or not to be".</p>
  </body>
</html>

Probier es selbst »

Der eingefügte Text "William Shakespeare -" erscheint direkt vor dem Zitat, obwohl er im HTML nirgendwo vorhanden ist.

Die generierte Box stylen

Da das Pseudo-Element eine Box ist, können Sie ihm wie einem normalen Element einen Hintergrund, einen Rahmen und einen display-Wert geben:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::before { 
        content: "William Shakespeare-";
        display: inline-block;
        background-color: #ccc;
        color: #666;
        border: 2px dotted #000;
      }
    </style>
  </head>
  <body>
    <h2>::before selector example</h2>
    <p>"Be or not to be".</p>
  </body>
</html>

Probier es selbst »

Häufige Anwendungsfälle

::before glänzt immer dann, wenn Sie Dekoration benötigen, die nicht ins Markup gehört:

Icons und Aufzählungszeichen – stellen Sie Links, Listenelementen oder Schaltflächen ein Symbol (content: "★") oder ein url()-Bild voran.
Pflichtfeld-Markierungen – fügen Sie Labels ein rotes Sternchen hinzu: label.required::before { content: "*"; color: red; }.
Öffnende Anführungszeichen – umrahmen Sie Blockzitate mit typografischen Anführungszeichen.
Zähler – kombinieren Sie ::before mit counter-increment, um Abschnitte automatisch zu nummerieren.
Attributwerte abrufen – zeigen Sie das eigene Attribut eines Elements mit attr() an:

abbr[title]::before {
  content: attr(title) ": ";
  font-weight: bold;
}

Barrierefreiheit und Fallstricke

content ist Pflicht. Wenn Sie es vergessen, wird das Pseudo-Element überhaupt nicht generiert.
Dekorative Boxen benötigen content: "". Für ein rein visuelles Element (ein Trenner, ein Icon-Hintergrund) setzen Sie einen leeren String, damit die Box trotzdem gerendert wird.
Generierter Text ist nicht auswählbar und wird von den meisten Screenreadern entweder ignoriert oder uneinheitlich vorgelesen. Platzieren Sie niemals Informationen, die der Nutzer unbedingt braucht (z. B. wichtige Anweisungen), ausschließlich in ::before.
Es gilt nicht für ersetzte Elemente (<img>, <input>, <br> usw.).
Der Einfügepunkt ist entscheidend. ::before ist das erste Kind innerhalb des Elements – nicht vor dem öffnenden Tag des Elements.

Hinweis

Für rein dekorative Pseudo-Elemente setzen Sie immer content: '', um sicherzustellen, dass sie in allen Browsern korrekt gerendert werden.

Browser-Unterstützung

::before wird in allen modernen Browsern unterstützt. Die Einzeldoppelpunkt-Form (:before) ist ebenfalls weit verbreitet und war die Syntax vor CSS3 – verwenden Sie sie nur, wenn Sie sehr alte Browser unterstützen müssen.

Übungsaufgaben

Übung

Was bewirkt das '::before'-Pseudo-Element in CSS?

Es fügt Inhalt vor dem Inhalt des ausgewählten Elements ein.Es versteckt Inhalt vor dem ausgewählten Element.Es ändert die Farbe des ausgewählten Elements.Es wird verwendet, um das ausgewählte Element zu stylen, bevor andere Stile angewendet werden.

So funktioniert ::before