CSS Academy · Lektion

::before- und ::after-Inhalte

Fügen Sie mit ::before und ::after sowie der content-Eigenschaft generierte Inhalte vor oder nach Elementen ein.

::before- und ::after-Inhalte ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was sind Pseudoelemente?

Pseudoelemente erzeugen virtuelle Elemente, die so gestaltet werden, als wären sie Teil des DOM. Sie verwenden doppelte Doppelpunkte ::. Am häufigsten werden ::before und ::after verwendet.

::before und ::after

::before fügt generierten Inhalt vor dem Inhalt eines Elements ein. ::after fügt ihn danach ein. Beide benötigen die Eigenschaft content, um dargestellt zu werden.

<span class="element">Text with generated content</span>

Die content-Eigenschaft

Die content-Eigenschaft akzeptiert:

Eine Zeichenfolge: content: "text"
Eine leere Zeichenfolge: content: "" (häufig für dekorative Formen)
Eine URL: content: url("icon.svg")
Einen Zähler: content: counter(step)
attr(): content: attr(data-tooltip)

Dekorative Anführungszeichen

Fügen Sie typografische Anführungszeichen hinzu, ohne sie in HTML einzufügen:

<blockquote>Design is not just what it looks like — design is how it works.</blockquote>

Formen mit leerem content

Das Festlegen von content: "" zusammen mit Position und Abmessungen erzeugt dekorative Formen ohne zusätzliches HTML:

<div class="card" style="position:relative;background:#fff;border:1px solid #ddd;padding:16px;margin-top:12px;">Card with a colored top bar drawn by ::before</div>

Clearfix mit ::after

Der klassische Clearfix verwendet ::after, um Floats ohne zusätzliches Markup aufzuheben:

<div class="clearfix" style="border:1px solid #ccc;">
  <div style="float:left;width:50%;background:#4f8cff22;padding:8px;">Floated column</div>
</div>

Tooltip mit ::after

Ein reiner CSS-Tooltip mit ::after und attr():

<span data-tooltip="Helpful hint" style="position:relative;display:inline-block;margin-top:24px;">Hover target</span>

Icon mit content: url()

Fügen Sie mithilfe von content: url() vor Links ein kleines Icon ein:

<a href="https://example.com" target="_blank" rel="noopener">External link</a>

Einschränkungen von Pseudoelementen

Pseudoelemente sind nicht Teil des DOM. Sie sind:

Für Benutzer weder auswählbar noch durchsuchbar
Standardmäßig für Screenreader nicht zugänglich
Nicht über JavaScript ansprechbar

Platzieren Sie niemals wichtige Inhalte in generierten Inhalten – verwenden Sie Pseudoelemente ausschließlich zu dekorativen Zwecken.

Einfacher vs. doppelter Doppelpunkt

Der einfache Doppelpunkt (:before) war die Syntax von CSS2. Der doppelte Doppelpunkt (::before) ist der CSS3-Standard, der Pseudoelemente von Pseudoklassen unterscheidet. Beide funktionieren in modernen Browsern, aber verwenden Sie für neuen Code den doppelten Doppelpunkt.

Welche Elemente unterstützen ::before/::after

Ersetzte Elemente (img, input, select, video) können keine Pseudoelemente besitzen, da sie keinen Inhaltsbereich haben, in den diese eingefügt werden könnten. Verwenden Sie stattdessen ein Wrapper-Element für die Dekoration.

Kurzer Test

Welcher content-Wert ist für ein dekoratives ::before-Pseudoelement ohne sichtbaren Text erforderlich?

Zusammenfassung

::before und ::after fügen generierten Inhalt vor beziehungsweise nach dem eigentlichen Inhalt eines Elements ein. Die content-Eigenschaft ist erforderlich. Verwenden Sie sie für dekorative Formen, Icons, Anführungszeichen und Tooltips – niemals jedoch für wichtige Inhalte, auf die Benutzer zugreifen oder die sie lesen müssen.

Häufig gestellte Fragen

Ist die Lektion „::before- und ::after-Inhalte“ kostenlos?

Ja — der vollständige Text von „::before- und ::after-Inhalte“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „::before- und ::after-Inhalte“?

Fügen Sie mit ::before und ::after sowie der content-Eigenschaft generierte Inhalte vor oder nach Elementen ein. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um CSS Academy zu starten?

Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „::before- und ::after-Inhalte“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?

Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu CSS Academy