::first-line

Die Effekte von ::first-line sind durch die Länge und den Inhalt der ersten Textzeile in dem Element begrenzt. Die Länge der ersten Zeile hängt von vielen Faktoren ab, einschließlich der Breite des Elements, der Breite des Dokuments und der Schriftgröße des Textes. ::first-line hat keine Wirkung, wenn das erste Kind des Elements, das der erste Teil der ersten Zeile wäre, ein Inline-Blockelement ist, wie z.B. eine Inline-Tabelle.

Note: Selectors Level 3 führte die Doppelpunktnotation (::) ein, um Pseudoelemente von den Einfachpunkten (:) Pseudoklassen zu unterscheiden. Browser akzeptieren sowohl ::first-line als auch :first-line, das in CSS2 eingeführt wurde.

Für die Zwecke von CSS background ist das ::first-line Pseudoelement wie ein Inline-Element, was bedeutet, dass in einer linksbündigen ersten Zeile der Hintergrund möglicherweise nicht bis zum rechten Rand reicht.

Nur eine kleine Teilmenge von CSS-Eigenschaften kann mit dem ::first-line Pseudoelement verwendet werden:

• Alle schriftbezogenen Eigenschaften: font, font-kerning, font-style, font-variant, font-variant-numeric, font-variant-position, font-variant-east-asian, font-variant-caps, font-variant-alternates, font-variant-ligatures, font-synthesis, font-feature-settings, font-language-override, font-weight, font-size, font-size-adjust, font-stretch, und font-family
• Alle hintergrundbezogenen Eigenschaften: background-color, background-clip, background-image, background-origin, background-position, background-repeat, background-size, background-attachment, und background-blend-mode
• Die color Eigenschaft
• word-spacing, letter-spacing, text-decoration, text-transform, und line-height
• text-shadow, text-decoration, text-decoration-color, text-decoration-line, text-decoration-style, und vertical-align.

HTML

<p>
  Styles will only be applied to the first line of this paragraph. After that,
  all text will be styled like normal. See what I mean?
</p>

<span>
  The first line of this text will not receive special styling because it is not
  a block-level element.
</span>

CSS

* {
  font-size: 20px;
  font-family: sans-serif;
}

::first-line {
  color: blue;
  font-weight: bold;

  /* WARNING: DO NOT USE THESE */
  /* Many properties are invalid in ::first-line pseudo-elements */
  margin-left: 20px;
  text-indent: 20px;
}

In diesem Beispiel stylen wir die erste Zeile eines SVG-<text>-Elements mit dem ::first-line Pseudoelement.

HTML

<svg viewBox="0 0 320 150">
  <text y="20">Here is an English paragraph
that is broken into multiple lines
in the source code so that it can
be more easily read and edited
in a text editor.
  </text>
</svg>

CSS

Um das SVG-<text>-Element dazu zu bringen, in mehrere Zeilen umzubrechen, verwenden wir die white-space CSS-Eigenschaft. Wir wählen dann die erste Zeile mit dem ::first-line Pseudoelement aus.

text {
  font-size: 20px;
  font-family: sans-serif;
}

text {
  white-space: break-spaces;
}

text::first-line {
  fill: blue;
  font-weight: bold;
}

Ergebnis

• ::first-letter
• white-space