Pseudoelemente

Ein Pfeil hinter jedem externen Link, ein Anführungszeichen vor jedem Zitat. Ohne Pseudoelemente müsste so etwas jedes Mal von Hand ins Markup. Pseudoelemente sprechen einen Teil eines Elements an, den es im Markup gar nicht gibt, und füllen ihn aus dem Stylesheet.

Du erkennst sie an den zwei Doppelpunkten, und das ist auch der einzige Zweck der Schreibweise. :hover ist ein Zustand, ::before ein erzeugter Teil. Die vier ältesten (::before, ::after, ::first-line, ::first-letter) verstehen Browser aus Rücksicht auf alte Seiten auch mit einem Doppelpunkt. Neu schreibt man es nicht mehr so, und alle späteren wie ::placeholder gehen nur mit zweien.

01 / 03::before und ::after

<p class="hinweis">Ein Hinweis mit Zeichen davor und dahinter.</p>
<p class="ohne-content">Hier fehlt das content, deshalb passiert nichts.</p>

.hinweis::before {
  content: "→ ";
  color: #2563eb;
  font-weight: 700;
}

.hinweis::after {
  content: " ←";
  color: #2563eb;
}

/* Ohne content wird nichts erzeugt, egal was sonst dasteht */
.ohne-content::before {
  color: #b91c1c;
  font-size: 40px;
}

::before und ::after erzeugen ein Kind am Anfang beziehungsweise am Ende des Elements. Es steht darin und nicht daneben. Der Pfeil im Beispiel steht innerhalb des Absatzes, vor dessen Text.

Die entscheidende Zeile ist content. Ohne sie entsteht überhaupt nichts, und das siehst du im Beispiel am zweiten Absatz: Farbe und Schriftgröße stehen da, sichtbar ist trotzdem nichts. Der Fehler ist zäh, weil die Regel richtig aussieht.

Wenn du nur eine Fläche brauchst, etwa einen dekorativen Balken, schreibst du content: "". Zwei Anführungszeichen ohne Inhalt reichen, ganz weglassen darfst du es nicht.

attr() setzt den Wert eines Attributs in den erzeugten Inhalt ein, etwa die Quelle eines Zitats. Wie das geht, steht in der CSS-Referenz unter content.

02 / 03Marker und Platzhalter

<ul class="vorteile">
  <li>Werbefrei</li>
  <li>Kostenlos</li>
</ul>

<p>
  <label for="name">Name</label>
  <input type="text" id="name" placeholder="Vor- und Nachname">
</p>

.vorteile li::marker {
  color: #2563eb;
  font-size: 20px;
}

input::placeholder {
  color: #a1a1aa;
  font-style: italic;
}

Neben den beiden erzeugten gibt es Pseudoelemente für etwas, das ohnehin da ist.

::marker ist der Aufzählungspunkt einer Liste. Lange kam man an ihn gar nicht heran. Für einen farbigen Punkt bei schwarzem Text musste man den Punkt abschalten und mit ::before einen neuen bauen. Seit 2020 reicht eine Regel. Erlaubt sind daran nur wenige Eigenschaften, im Wesentlichen Farbe, Schrift und content, und Safari kann davon bis heute nur Farbe und Schriftgröße (Stand Oktober 2026). Für einen farbigen Punkt reicht das überall.

::placeholder ist der Platzhaltertext in einem Eingabefeld. Ein Platzhalter ersetzt kein Label. Er verschwindet beim Tippen und ist meistens zu kontrastarm. Fehlt das Label, nimmt der Browser ihn zwar ersatzweise als Namen des Felds, aber nach dem ersten Buchstaben kann diesen Namen niemand mehr sehen.

Dazu kommen ::first-line und ::first-letter für die erste Zeile und den ersten Buchstaben, ::selection für markierten Text und ::backdrop für die Fläche hinter einem Dialog, und das begegnet dir in Abschnitt 14 wieder. Die ersten beiden findest du in der CSS-Referenz unter Selektoren Erweitert.

03 / 03Was Pseudoelemente nicht können

Zwei Grenzen haben sie.

Erzeugter Inhalt steht nicht im DOM. Er lässt sich nicht markieren und nicht kopieren. Screenreader gehen unterschiedlich damit um, manche lesen ihn vor, manche nicht. Also gehört dort nichts hinein, was man zum Verstehen braucht. Dekoration ja, Information nein.

Nicht jedes Element hat sie. Bei ersetzten Elementen wie img, input oder video gibt es kein ::before und kein ::after, weil ihr Inhalt vom Browser kommt und nicht aus dem Dokument. Wenn du ein Icon an ein Bild hängen willst, brauchst du ein Element drumherum.

Für die Aufgabe gibt es ein Zitat, eine Liste und zwei Links, und am Markup änderst du dabei nichts.