CSS-Pseudo-Elemente

von

1. Was sind Pseudo-Elemente?

Ein Pseudo-Element ist ein virtuelles Kind eines existierenden Elements, mit dem man bestimmte Teile eines Elements gestalten kann, etwa:

  • „in den Inhalt eingefügtes“ zusätzliches Styling (::before, ::after)
  • typografische Teile (::first-line, ::first-letter)
  • Selektierte Bereiche (::selection)
  • Platzhaltertexte, Markierungselemente etc. MDN Web Docs

Sie werden in CSS mit zwei Doppelpunkten (::) notiert — Single-Colon (:) wird historisch noch unterstützt für einige alte Pseudo-Elemente. MDN Web Docs

2. Wichtige Pseudo-Elemente & ihre Verwendung

Pseudo-ElementBeschreibungTypische EinsatzfälleEinschränkungen / Besonderheiten
::beforeErzeugt ein Pseudo-Element als erstes Kind des Elements. Kann über content dekorative Inhalte hinzufügen. (MDN Web Docs)Icons, Zitatezeichen, zusätzliche dekorative Inhalte, Übersichtsdekorationen, kleine grafische Akzente.Das Element muss Kind-fähig sein (nicht ersetzt, z. B. kein <img>, <input> etc.). Wenn content fehlt oder none/normal ist, wird nichts gerendert. Display ist standardmäßig inline. (MDN Web Docs)
::afterWie ::before, aber als letztes Kind. (MDN Web Docs)Häufig für abschließende Dekorationen, Icons am Ende, Hover Effekte etc.Gleiche Einschränkungen wie bei ::before. Wichtig: Reihenfolge und Stapelkontext beachten; standardmäßig erscheint Inhalt von ::after oberhalb von ::before (wenn kein z-index). (MDN Web Docs)
::first-lineStil auf die erste Zeile eines Blockelements anwenden. (MDN Web Docs)typografische Effekte, z. B. Großbuchstaben, besondere Farbe oder Schriftstil für die erste Zeile eines Absatzes.Nur bei Blockcontainern; nicht alle CSS Eigenschaften sind erlaubt (z. B. keine Margin etc.). (web.dev)
::first-letterStil auf den ersten Buchstaben oder Zeichen eines Elementes (nach Zeilenumbruch) anwenden. (MDN Web Docs)Initialziffern, große Buchstaben, dekorative erste Buchstaben, z. B. Drop Caps.Wie oben: Beschränkt auf bestimmte Elemente; Eigenschaften sind eingeschränkt.
::selectionBereich, den der Benutzer markiert hat – kann z. B. Hintergrund- oder Textfarbe ändern, wenn markiert. (MDN Web Docs)Personalisierte Hervorhebung bei Text-Selektion.Nur bestimmte CSS Eigenschaften erlaubt; funktioniert nur bei sichtbarem Text.
::placeholderDer Platzhaltertext eines Eingabefelds (<input placeholder="…">, <textarea>)Platzhalterstil anpassen: Farbe, Schriftgröße etc. (MDN Web Docs)Browser‐Unterschiede, eingeschränkter Satz an CSS Eigenschaften.
::markerDas automatisch generierte Markierungssymbol eines Listenelements (<li>)Stil von Listensymbolen ändern, Farbe, Größe etc. (MDN Web Docs)Funktioniert nur wenn das Element Listenelement ist oder ein Pseudo-Element zu Listenelement wird (z. B. display: list-item)

3. Syntax & Regeln

  • Pseudo-Element steht am Ende des Selektors. Beispiel: div.highlight::before, nicht ::before div.highlight. MDN Web Docs
  • Doppelpunkt-Notation (::pseudo) ist Standard, Single-Colon (:pseudo) wird nur aus Kompatibilitätsgründen bei einigen älteren Pseudo-Elementen noch akzeptiert (z. B. :before, :after, :first-letter, :first-line) MDN Web Docs
  • Pseudo-Elemente ohne gültigen content (oder mit normal/none) werden nicht erzeugt – Verhalten, als ob display: none. MDN Web Docs
  • Display-Eigenschaft: Standard ist oft inline, aber man kann auch z. B. block, inline-block etc. verwenden, um Größe, Margin, Padding etc. zu kontrollieren. MDN Web Docs
  • Z-Index / Stapelreihenfolge: Wenn nichts spezifiziert, wird ::after über ::before gerendert, weil später im DOM-Fluss. MDN Web Docs

4. Beispiele

<code><style>
.card {
  position: relative;
  padding: 20px;
  border: 1px solid #ccc;
}

.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 5px; height: 100%;
  background: blue;
}

.quote::before {
  content: "“";
  font-size: 2rem;
  color: gray;
  margin-right: 0.5rem;
}

.quote::after {
  content: "”";
  font-size: 2rem;
  color: gray;
  margin-left: 0.5rem;
}

li::marker {
  color: red;
  font-size: 1.2em;
}
</style>

<div class="card">Inhalt der Karte</div>
<p class="quote">Dies ist ein Zitat.</p>
<ul>
  <li>Erster Punkt</li>
  <li>Zweiter Punkt</li>
</ul></code>

5. Vor‐ und Nachteile / Best Practices

Vorteile:

  • Kein zusätzliches HTML nötig für dekorative Elemente – sauberer Code.
  • Flexibel: Kann mit CSS gesteuert werden, responsive, stilistisch leicht veränderbar.
  • Kann Performance verbessern, weil weniger DOM-Nodes.

Nachteile:

  • Für Screenreader / Accessibility: Inhalte, die rein dekorativ sind, sollten mit Vorsicht eingesetzt werden; Screenreader können zusätzliche Inhalte via ::before / ::after ignorieren oder unvorhersehbar behandeln. MDN Web Docs
  • Aufwendige Pseudo-Elemente (z. B. große grafische Elemente) können komplex zu kontrollieren sein hinsichtlich Position, Größe und Überlagerung.
  • Nicht alle CSS Eigenschaften sind bei allen Pseudo-Elementen erlaubt (z. B. bei first-letter).