Startseite >CSS >CSS-Referenz – Eigenschaften, Selektoren, Funktionen >::first-line

::first-line

Selektor::first-line

Wählt die erste Textzeile eines Blockelements – so, wie sie der Browser gerade umbrochen hat. Bei einer anderen Fensterbreite oder Schriftgröße enthält die erste Zeile eine andere Anzahl von Wörtern und der Stil wandert mit ihnen.

Werte

Nur Schrift- und Texteigenschaften lassen sich verwenden: font…, color, der Hintergrund, letter-spacing, word-spacing, text-decoration, text-transform, line-height, Textschatten. Keine Außen- und Innenabstände oder Rahmen.

Beispiele

Die erste Zeile eines Anreißers ist in Kapitälchen und dunkler:

<p class="excerpt">Die erste Zeile dieses Absatzes ist in Kapitälchen gesetzt, die folgenden Zeilen normal – und wie viele Wörter in die erste Zeile passen, hängt von der Breite ab.</p>

.excerpt::first-line {
  color: #01579b;
  font-variant: small-caps;
  letter-spacing: 0.05em;
}

Das Ergebnis: Die Wörter der ersten Zeile sind dunkelblau, in Kapitälchen und mit etwas weiterem Buchstabenabstand; nach dem Verschmälern des Fensters gilt der Stil für weniger Wörter.

Worauf Sie achten sollten

  • Es funktioniert nur bei Blockelementen, genau wie ::first-letter.
  • Laut MDN verwendet Safari text-transform in ::first-line nicht (Stand Oktober 2026). Für Großbuchstaben in der ersten Zeile ist font-variant: small-caps zuverlässiger.
  • Hat die erste Zeile zusätzlich ein ::first-letter, hat dessen Stil für den ersten Buchstaben Vorrang.

Browserunterstützung

Baseline – weithin verfügbar: funktioniert in allen gängigen Browsern, und das schon lange (spätestens seit 2015). Ab Version: Chrome 1, Firefox 1, Safari 1. Stand: Oktober 2026 (MDN browser-compat-data).

Siehe auch:
::first-letter
::before und ::after
font-variant-numeric
text-transform
letter-spacing