Lädt...

CSS-Pseudoelemente

Pseudoklassen ändern das Aussehen, wenn sich ein Zustand ändert (:hover, :focus). Pseudoelemente gehen weiter: Sie können ein Stück Text gestalten oder eine kleine Box vor oder nach dem echten Inhalt erzeugen — mit doppeltem Doppelpunkt (::) und ohne Extra-Tags im HTML.

Was bedeutet Pseudoelement?

Ein Pseudoelement ist ein Wort mit :: am Selektor. Es trifft etwas, das im Markup kein volles Element ist: den ersten Buchstaben, die erste Zeile oder eine erzeugte Box vor/nach dem Inhalt. Für ::before und ::after brauchen Sie meist content, damit etwas sichtbar wird.

Vier häufige Pseudoelemente

Lernen Sie zuerst diese. Die alte Schreibweise mit einem Doppelpunkt (:before) funktioniert oft noch — schreiben Sie trotzdem modern mit zwei Doppelpunkten.

📊 Alltägliche CSS-Pseudoelemente

Pseudoelement Was es gestaltet Beispiel
::before Box vor dem Inhalt des Elements p::before
::after Box nach dem Inhalt des Elements a::after
::first-letter Ersten Buchstaben eines Textblocks p::first-letter
::first-line Erste Zeile eines Textblocks p::first-line

Vor dem Inhalt — ::before und content

::before erzeugt eine virtuelle Box vor dem echten Text. Fast immer setzen Sie content — einen String oder "" für eine leere Deko-Box.

Vorher — öffnendes Anführungszeichen

css
CSS Code 
.quote::before {
content: "“";
color: #0f766e;
font-size: 1.5rem;
margin-right: 0.25rem;
}

content nicht vergessen

Ohne content zeigen viele ::before/::after-Regeln nichts. Für einen Farbbalken oder Hintergrund-Icon reicht content: "".

Nach dem Inhalt — ::after

::after ist dieselbe Idee nach dem Inhalt — für Einheiten, Badges oder ein kleines Suffix.

Danach — Hinweis auf externen Link

css
CSS Code 
a.external::after {
content: " ↗";
font-size: 0.85em;
}

Wichtige Bedeutung nicht hier verstecken

Screenreader und manche Tools behandeln erzeugten Inhalt uneinheitlich. Legen Sie Pflichtanweisungen nicht nur in ::before/::after; echter Text gehört ins HTML.

Erster Buchstabe — ::first-letter

::first-letter gestaltet den ersten Buchstaben eines Textblocks — klassischer Drop-Cap-Look.

Erster Buchstabe — größerer Anfang

css
CSS Code 
.lead::first-letter {
font-size: 2.5rem;
font-weight: 700;
color: #0f766e;
float: left;
line-height: 1;
margin-right: 0.15em;
}

Erste Zeile — ::first-line

::first-line gestaltet nur die erste sichtbare Zeile — nicht den „ersten Satz“, sondern die Zeile nach dem Umbruch im Browser.

Erste Zeile — etwas kräftiger

css
CSS Code 
.lead::first-line {
font-weight: 600;
color: #334155;
}

Leere Deko-Box

Manchmal wollen Sie nur einen Farbstreifen ohne Text. Dann reicht content: "".

Leeres before — Dekostreifen

css
CSS Code 
.card::before {
content: "";
display: block;
height: 4px;
background: #0f766e;
margin-bottom: 0.75rem;
}

Gute Gewohnheiten

  • Pseudoelement = doppelter Doppelpunkt (::before); Pseudoklasse = einer (:hover)
  • content setzen, wenn ::before/::after sichtbar sein sollen
  • Pflichttext im HTML behalten, nicht nur im erzeugten Inhalt
  • ::first-letter und ::first-line brauchen Textblöcke
  • Modernes :: bevorzugen, auch wenn altes :before noch geht

Selbst ausprobieren

  1. Kurze Seite mit Absatz .quote, Absatz .lead, Link a.external und .card mit Text.
  2. .quote::before { content: "“"; color: #0f766e; } — Anführungszeichen prüfen.
  3. Auf Link mit class external: a.external::after { content: " ↗"; }.
  4. .lead::first-letter größer und teal; .lead::first-line mit font-weight: 600.
  5. .card::before { content: ""; display: block; height: 4px; background: #0f766e; } für den oberen Balken.

Typische Fehler

  • :before schreiben, wenn Sie einen Zustand wie :hover meinen — Zustand ein Doppelpunkt; erzeugte Box zwei
  • content vergessen, sodass nichts erscheint
  • Die einzige Warnung nur in ::after legen
  • Wunder von ::first-letter auf leerem oder nur-Bild-Element erwarten
  • ::first-line mit „erstem Satz“ verwechseln — der Umbruch entscheidet

Kurzfassung

  • Pseudoelemente mit :: gestalten einen Teil oder eine erzeugte Box
  • ::before/::after brauchen content (String oder "")
  • ::first-letter und ::first-line treffen den Textanfang
  • Kritische Bedeutung bleibt im HTML
  • Ein Doppelpunkt = Pseudoklasse; zwei = Pseudoelement
  • Üben mit Anführungszeichen, Link-Suffix und Lead-Absatz

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓
8
Fragen
🎯
70%
Zum Bestehen
♾️
∞
Zeit
🔄
∞
Versuche

📝 Anweisungen

  • Lesen Sie jede Frage sorgfältig
  • Wählen Sie die beste Antwort für jede Frage
  • Sie können das Quiz so oft wiederholen, wie Sie möchten
  • Ihr Fortschritt wird oben angezeigt
Thema 1 von 1
Css Tutorial