::first-letter

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Das ::first-letter CSS Pseudoelement wendet Stile auf den ersten Buchstaben der ersten Zeile eines Blockcontainers an, jedoch nur, wenn diesem kein anderer Inhalt wie Bilder oder Inline-Tabellen vorausgeht.

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 das Matching einbezogen. Satzzeichen umfassen alle Unicode-Zeichen, die in den Klassen open (Ps), close (Pe), initial quote (Pi), final quote (Pf) und other punctuation (Po) definiert sind.
  • Einige Sprachen haben Digraphen, die immer zusammen großgeschrieben werden, wie das IJ im Niederländischen. In diesen Fällen sollten beide Buchstaben des Digraphen durch das ::first-letter Pseudoelement erfasst werden.
  • Eine Kombination aus dem ::before Pseudoelement und der content Eigenschaft kann zu Beginn des Elements Text einfügen. In diesem Fall wird ::first-letter den ersten Buchstaben dieses generierten Inhalts erfassen.

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

Die Unterstützung von Digraphen wie IJ im Niederländischen ist schlecht. Überprüfen Sie die Kompatibilitätstabelle unten, um den aktuellen Stand der Unterstützung zu sehen.

Zulässige Eigenschaften

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

Syntax

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

Beispiele

Einfacher Initialbuchstabe

In diesem Beispiel werden wir das ::first-letter Pseudoelement verwenden, um einen Initialbuchstaben-Effekt auf den ersten Buchstaben des Absatzes direkt nach dem <h2> zu erzeugen.

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 spezielle Satzzeichen und nicht-lateinische Zeichen

Dieses Beispiel veranschaulicht den Effekt von ::first-letter auf spezielle 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

Erstbuchstaben-Stil in SVG Textelement

In diesem Beispiel verwenden wir das ::first-letter Pseudoelement, um den Erstbuchstaben eines SVG <text> Elements zu stylen.

Hinweis: Zum Zeitpunkt des Schreibens hat dieses Merkmal 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;
}

Ergebnis

Spezifikationen

Specification
CSS Pseudo-Elements Module Level 4
# first-letter-pseudo

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch