Ausführbare CSS-Docs: ::before und ::after

Q: Warum wird mein ::before oder ::after nicht angezeigt?

Der häufigste Grund ist eine fehlende Eigenschaft content: Ohne sie wird das Pseudoelement nicht erzeugt. Nimm content: "" für eine leere dekorative Box. Weitere Ursachen: ein Inline-Pseudoelement mit Breite und Höhe (gib ihm display: block oder inline-block) oder ein Element wie oder , das sie nicht aufnehmen kann.

Q: Was ist der Unterschied zwischen :before und ::before?

Im Verhalten keiner. ::before mit zwei Doppelpunkten ist die aktuelle Syntax, die Pseudoelemente kennzeichnet; :before mit einem Doppelpunkt ist die ältere Schreibweise aus CSS2, die Browser für before, after, first-line und first-letter weiterhin akzeptieren.

Q: Lesen Screenreader den Inhalt von CSS ::before vor?

In der Regel ja: Text in content fließt meist in den zugänglichen Namen ein, lässt sich aber weder markieren noch kopieren. Behalte echte Informationen im HTML und nutze Pseudoelemente für Dekoration und kleine visuelle Hinweise.

Was ::before und ::after machen

::before fügt eine Box als erstes Kind eines Elements ein und ::after als letztes Kind. Was in der Box steht, legt die Eigenschaft content fest. Am HTML ändert sich nichts: Der Browser erzeugt die Box aus dem CSS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>before and after</title>
  <style>
    .price::before { content: "$"; color: #16a34a; }
    .price::after { content: " / month"; color: #6b7280; font-size: 14px; }
    .done::before { content: "✓ "; color: #16a34a; font-weight: bold; }
  </style>
</head>
<body>
  <p class="price">9</p>
  <p class="done">Tests pass</p>
</body>
</html>

Im HTML stehen nur 9 und Tests pass. Das Dollarzeichen, das Label „/ month“ und das Häkchen kommen alle aus dem CSS. Sie erben die Styles des Elements (Schrift, Farbe), solange du sie nicht überschreibst, wie es die Beispiele oben tun.

Syntax

selector::before {
  content: "text";   /* required */
  /* any other styles */
}

selector::after {
  content: "";       /* empty string: a box with no text */
}

Wert von `content`	Ergebnis
`"text"`	Ein String. Nimm `"\A"` für einen Zeilenumbruch (mit `white-space: pre`), `"\2192"` für ein Unicode-Zeichen (→)
`""`	Eine leere Box, für Formen und Dekorationen
`attr(data-label)`	Der Wert eines Attributs des Elements
`counter(step)`	Der Wert eines CSS-Zählers
`open-quote` / `close-quote`	Anführungszeichen für die Sprache des Elements
`none` oder `normal`	Kein Pseudoelement (`normal` ist der Standard)

content ist Pflicht. Ohne diese Eigenschaft werden ::before und ::after nie erzeugt, egal wie viele andere Eigenschaften du ihnen gibst.

Dekorative Formen mit content: ""

Mit content: "" ist das Pseudoelement eine leere Box, der du Größe und Farbe geben kannst. Standardmäßig ist sie inline, und eine Inline-Box ignoriert width und height, also gib ihr display: block, inline-block oder position: absolute:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Shapes</title>
  <style>
    .status::before {
      content: "";
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #16a34a;
      margin-inline-end: 8px;
    }
    .status.offline::before { background: #e5e7eb; }

    .heading::after {
      content: "";
      display: block;
      width: 48px;
      height: 4px;
      background: #2563eb;
      margin-top: 6px;
      border-radius: 2px;
    }
  </style>
</head>
<body>
  <h2 class="heading">Section title</h2>
  <p class="status">Online</p>
  <p class="status offline">Offline</p>
</body>
</html>

Ein Pseudoelement positionieren

Für eine Dekoration, die auf oder um das Element liegt, setzt du position: absolute auf das Pseudoelement und position: relative auf das Element selbst, damit die Abstände vom Element aus gemessen werden:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline on hover</title>
  <style>
    .link {
      position: relative;
      color: #2563eb;
      text-decoration: none;
      font-size: 20px;
    }
    .link::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -4px;
      width: 100%;
      height: 2px;
      background: currentColor;
      transform: scaleX(0);
      transition: transform 0.25s;
    }
    .link:hover::after { transform: scaleX(1); }

    .card { position: relative; border: 2px solid #e5e7eb; padding: 16px; margin-top: 24px; }
    .card::before {
      content: "NEW";
      position: absolute;
      top: -12px;
      right: 12px;
      background: #f59e0b;
      padding: 2px 8px;
      font-size: 12px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <a class="link" href="#">Hover this link</a>
  <div class="card">A card with a badge from ::before</div>
</body>
</html>

Achte auf die Reihenfolge, wenn du es mit einer Pseudoklasse kombinierst: Zuerst kommt der Zustand, dann das Pseudoelement, also .link:hover::after, niemals .link::after:hover.

attr() holt den Wert eines Attributs in content, sodass eine einzige Regel an jedem Element einen anderen Text zeigen kann:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tooltip</title>
  <style>
    [data-tip] { position: relative; border-bottom: 1px dotted #2563eb; cursor: help; }
    [data-tip]::after {
      content: attr(data-tip);
      position: absolute;
      bottom: 125%;
      left: 0;
      background: #111827;
      color: white;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 13px;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s;
    }
    [data-tip]:hover::after { opacity: 1; }
    p { margin-top: 48px; }
  </style>
</head>
<body>
  <p>Hover <span data-tip="HyperText Markup Language">HTML</span> or
     <span data-tip="Cascading Style Sheets">CSS</span>.</p>
</body>
</html>

Einen Tooltip, der nur beim Hovern erscheint, sehen Tastatur- und Touch-Nutzer nicht. Alles Wichtige gehört als Text in die Seite, oder du zeigst ihn zusätzlich bei :focus, mit tabindex="0" am Element.

Nummerieren mit Zählern

CSS-Zähler und ::before nummerieren Dinge, ohne dass du die Zahlen eintippst:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Counters</title>
  <style>
    .steps { counter-reset: step; padding: 0; }
    .steps li { list-style: none; counter-increment: step; margin: 8px 0; }
    .steps li::before {
      content: counter(step);
      display: inline-block;
      width: 24px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      border-radius: 50%;
      background: #2563eb;
      color: white;
      margin-inline-end: 8px;
    }
  </style>
</head>
<body>
  <ol class="steps">
    <li>Write the HTML</li>
    <li>Add the CSS</li>
    <li>Open it in a browser</li>
  </ol>
</body>
</html>

Füge einen Schritt hinzu oder entferne einen, und die Nummern passen sich selbst an.

Wo ::before und ::after nicht funktionieren

Pseudoelemente werden innerhalb des Elements eingefügt, zwischen seinen Tags. Elemente ohne ein solches Inneres können sie nicht anzeigen:

<img>, <video>, <iframe> (ersetzte Elemente)
<input>, <select>, <textarea> (Formularelemente) und <br>

Manche Browser zeichnen sie an einer Checkbox oder einem kaputten Bild, aber nicht einheitlich. Setz das Pseudoelement stattdessen an einen Wrapper: <span class="field"><input></span> und style .field::after.

Häufige Fehler

Kein content. Der mit Abstand häufigste Grund, warum nichts erscheint. Füge content: "" hinzu.
Einem Inline-Pseudoelement eine Größe geben. width und height bewirken nichts, bis du display: block, inline-block oder position: absolute setzt.
Falsche Reihenfolge mit einem Zustand. a:hover::after funktioniert; a::after:hover nicht.
Absolute Position ohne positioniertes Elternelement. Das Pseudoelement richtet sich dann an einem weit entfernten Vorfahren aus. Gib dem Element position: relative.
Echten Inhalt ins CSS schreiben. Text in content lässt sich weder markieren noch kopieren. Informationen gehören ins HTML.

Häufig gestellte Fragen

Was macht ::before in CSS?

Es erzeugt ein Pseudoelement, das das erste Kind des ausgewählten Elements ist, gefüllt mit dem, was die Eigenschaft content angibt. ::after macht dasselbe als letztes Kind. Keins von beiden steht im HTML, deshalb eignen sie sich für Icons, Labels und Dekorationen.

Warum wird mein ::before oder ::after nicht angezeigt?

Der häufigste Grund ist eine fehlende Eigenschaft content: Ohne sie wird das Pseudoelement nicht erzeugt. Nimm content: "" für eine leere dekorative Box. Weitere Ursachen: ein Inline-Pseudoelement mit Breite und Höhe (gib ihm display: block oder inline-block) oder ein Element wie <img> oder <input>, das sie nicht aufnehmen kann.

Was ist der Unterschied zwischen :before und ::before?

Im Verhalten keiner. ::before mit zwei Doppelpunkten ist die aktuelle Syntax, die Pseudoelemente kennzeichnet; :before mit einem Doppelpunkt ist die ältere Schreibweise aus CSS2, die Browser für before, after, first-line und first-letter weiterhin akzeptieren.

Kann ich ::before an einem img oder input verwenden?

Nicht zuverlässig. Pseudoelemente werden in den Inhalt des Elements eingefügt, und ersetzte Elemente wie <img> sowie Formularelemente wie <input> haben dafür keine Inhaltsbox. Pack das Element in ein <span> oder <div> und setz das Pseudoelement an diesen Wrapper.

Lesen Screenreader den Inhalt von CSS ::before vor?

In der Regel ja: Text in content fließt meist in den zugänglichen Namen ein, lässt sich aber weder markieren noch kopieren. Behalte echte Informationen im HTML und nutze Pseudoelemente für Dekoration und kleine visuelle Hinweise.

Verwandte Konzepte