`::first-letter` CSS pseudo-element

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Das ::first-letter CSS Pseudo-Element wendet Stile auf den ersten Buchstaben der ersten Zeile eines Block-Containers an, aber nur, wenn dieser nicht von anderem Inhalt (wie Bildern oder Inline-Tabellen) vorangestellt wird.

Probieren Sie es aus

p::first-letter {
  font-size: 1.5rem;
  font-weight: bold;
  color: brown;
}

<p>
  Scientists exploring the depths of Monterey Bay unexpectedly encountered a
  rare and unique species of dragonfish. This species is the rarest of its
  species.
</p>

<p>
  When Robison and a team of researchers discovered this fish, they were aboard
  a week-long expedition.
</p>

Der erste Buchstabe eines Elements ist nicht immer leicht zu identifizieren:

Satzzeichen, die dem ersten Buchstaben vorangehen oder unmittelbar folgen, werden in die Übereinstimmung einbezogen. Satzzeichen schließt alle Unicode-Zeichen ein, die in den Klassen open (Ps), close (Pe), initial quote (Pi), final quote (Pf) und other punctuation (Po) definiert sind.
In einigen Sprachen gibt es Digraphen, die immer zusammen großgeschrieben werden, wie das IJ im Niederländischen. In diesen Fällen sollten beide Buchstaben des Digraphen vom ::first-letter Pseudo-Element erfasst werden.
Eine Kombination aus dem ::before Pseudo-Element und der content Eigenschaft kann Text am Anfang des Elements einfügen. In diesem Fall wird ::first-letter den ersten Buchstaben dieses generierten Inhalts erfassen.

Hinweis: CSS führte die ::first-letter Notation (mit zwei Doppelpunkten) ein, um Pseudo-Klassen von Pseudo-Elementen zu unterscheiden. Aus Gründen der Abwärtskompatibilität akzeptieren Browser auch :first-letter, das früher eingeführt wurde.

Die Browser-Unterstützung für Digraphen wie IJ im Niederländischen ist schlecht. Sehen Sie sich die Kompatibilitätstabelle unten an, um den aktuellen Stand der Unterstützung zu sehen.

Zulässige Eigenschaften

Nur eine kleine Teilmenge von CSS-Eigenschaften kann mit dem ::first-letter Pseudo-Element verwendet werden:

Alle Schrift-Eigenschaften: font, font-style, font-feature-settings, font-kerning, font-language-override, font-stretch, font-synthesis, font-variant, font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric, font-variant-position, font-weight, font-size, font-size-adjust, line-height und font-family
Alle Hintergrund-Eigenschaften: background, background-color, background-image, background-clip, background-origin, background-position, background-repeat, background-size, background-attachment, und background-blend-mode
Alle Rand-Eigenschaften: margin, margin-top, margin-right, margin-bottom, margin-left
Alle Auffüllungs-Eigenschaften: padding, padding-top, padding-right, padding-bottom, padding-left
Alle Rahmen-Eigenschaften: die Kurzformen border, border-style, border-color, border-width, border-radius, border-image, und die Langformen
Die color Eigenschaft
Die Eigenschaften text-decoration, text-shadow, text-transform, letter-spacing, word-spacing (wenn anwendbar), line-height, text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align (nur wenn float none ist) CSS-Eigenschaften

Syntax

css

::first-letter {
  /* ... */
}

Beispiele

Einfaches Initial

In diesem Beispiel verwenden wir das ::first-letter Pseudo-Element, um einen hervorgehobenen Anfangsbuchstaben im ersten Absatz direkt nach dem <h2> zu erstellen.

HTML

html

<h2>My heading</h2>
<p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
  voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
  kasd gubergren, no sea takimata sanctus est.
</p>
<p>
  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
  consequat.
</p>

CSS

css

p {
  width: 500px;
  line-height: 1.5;
}

h2 + p::first-letter {
  color: white;
  background-color: black;
  border-radius: 2px;
  box-shadow: 3px 3px 0 red;
  font-size: 250%;
  padding: 6px 3px;
  margin-right: 6px;
  float: left;
}

Ergebnis

Effekt auf besondere Satzzeichen und nicht-lateinische Zeichen

Dieses Beispiel zeigt den Effekt von ::first-letter auf besondere Satzzeichen und nicht-lateinische Zeichen.

HTML

html

<p>
  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
  consequat.
</p>
<p>-The beginning of a special punctuation mark.</p>
<p>_The beginning of a special punctuation mark.</p>
<p>"The beginning of a special punctuation mark.</p>
<p>'The beginning of a special punctuation mark.</p>
<p>*The beginning of a special punctuation mark.</p>
<p>#The beginning of a special punctuation mark.</p>
<p>「特殊的汉字标点符号开头。</p>
<p>《特殊的汉字标点符号开头。</p>
<p>"特殊的汉字标点符号开头。</p>

CSS

css

p::first-letter {
  color: red;
  font-size: 150%;
}

Ergebnis

Gestaltung des ersten Buchstabens in einem SVG-Text-Element

In diesem Beispiel verwenden wir das ::first-letter Pseudo-Element, um den ersten Buchstaben eines SVG <text> Elements zu gestalten.

Hinweis: Zum Zeitpunkt des Schreibens hat dieses Feature eingeschränkte Unterstützung.

HTML

html

<svg viewBox="0 0 300 40">
  <text y="30">First letter in &lt;text&gt; SVG</text>
</svg>

CSS

css

text {
  font-family: sans-serif;
}

text::first-letter {
  font-family: serif;
  font-size: 2rem;
  font-weight: 600;
  fill: tomato;
  stroke: indigo;
}