CSS ::first-letter Pseudo-Element
Das ::first-letter CSS-Pseudo-Element wählt den ersten Buchstaben einer Zeile aus und gestaltet ihn. Mit Beispielen erklärt.
Das ::first-letter Pseudo-Element wendet Stile auf den ersten Buchstaben der ersten Zeile in einem Block-Level-Container an. Es wird am häufigsten verwendet, um Drop Caps und andere typografische Initialeffekte zu erstellen – ähnlich den großen, verzierten Buchstaben, die ein Kapitel in einem gedruckten Buch einleiten.
Das Pseudo-Element greift nur dann, wenn die display-Eigenschaft des Elements block, inline-block, list-item, table-cell oder table-caption ist. Bei Inline-Elementen wie <span> oder Bildern hat es keine Wirkung, da diese keine neue Zeile beginnen.
Wenn ein Satzzeichen (z. B. Anführungszeichen, Klammern oder ein Gedankenstrich) dem ersten Buchstaben vorangeht oder unmittelbar folgt, wird dieses Satzzeichen gemeinsam mit dem Buchstaben erfasst. Das Pseudo-Element zielt auf die erste typografische Buchstabeneinheit ab, sodass ein vorangehendes Symbol oder eine Ziffer zusammen mit dem darauf folgenden Buchstaben gestaltet wird.
CSS3 hat die Doppelpunkt-Syntax (::first-letter) eingeführt, um Pseudo-Elemente von Pseudo-Klassen zu unterscheiden. Die ältere Einzelpunkt-Form (:first-letter) wird von Browsern noch aus Gründen der Abwärtskompatibilität akzeptiert, aber die Doppelpunkt-Form ist im modernen Code bevorzugt.
Wann es verwendet wird
Greifen Sie auf ::first-letter zurück, wenn Sie:
- Eine Drop Cap erstellen möchten – den Anfangsbuchstaben eines Artikels oder Kapitels vergrößern und floaten.
- Eine besondere Farbe, Schriftart oder Stärke auf das führende Zeichen einer Überschrift oder eines Absatzes anwenden möchten.
- Druckähnliche Typografie im Web reproduzieren möchten, ohne den ersten Buchstaben in zusätzliches Markup zu verpacken.
Da der Effekt rein präsentationsbezogen ist, bleibt Ihr HTML sauber: Es ist nicht nötig, ein <span class="first"> um den Buchstaben zu setzen.
Zulässige Eigenschaften
Hier sind die CSS-Eigenschaften, die mit dem ::first-letter Pseudo-Element verwendet werden können:
Schrift-Eigenschaften: font, font-style, font-feature-settings, font-kerning, font-language-override, font-stretch, font-variant, font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric, font-weight, font-size, font-size-adjust, line-height und font-family.
Hintergrund-Eigenschaften: background, background-origin, background-position, background-repeat, background-size, background-attachment, background-blend-mode, background-color, background-image und background-clip.
Außenabstand-Eigenschaften: margin, margin-top, margin-right, margin-bottom, margin-left.
Innenabstand-Eigenschaften: padding, padding-top, padding-right, padding-bottom, padding-left.
Rahmen-Eigenschaften: Kurzschreibweisen, border-style, border-color, border-width, border-radius, border-image, Einzeleigenschaften.
Die color-Eigenschaft.
Die Eigenschaften text-decoration, text-shadow, text-transform, letter-spacing, word-spacing (wenn angemessen), text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align (nur float: none;).
Version
Syntax
CSS ::first-letter Syntax-Beispiel
::first-letter {
css declarations;
}Beispiel des ::first-letter Pseudo-Elements:
CSS ::first-letter Code-Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p::first-letter {
font-size: 35px;
color: #1c87c9;
}
</style>
</head>
<body>
<h2>::first-letter selector example</h2>
<p>Lorem ipsum is simply dummy text...</p>
</body>
</html>Ergebnis
Der erste Buchstabe des Absatzes wird in 35px und in Blau gerendert, während der restliche Text seine Standardgröße und -farbe behält.
Beispiel des ::first-letter Pseudo-Elements mit Satzzeichen und einer Ziffer:
Im folgenden Beispiel beginnt der erste Absatz mit einem Gedankenstrich und der zweite mit einer Ziffer. Beachten Sie, wie der führende Gedankenstrich gemeinsam mit dem ersten Buchstaben gestaltet wird, während eine führende Ziffer als eigenständiges erstes Zeichen der Zeile gestaltet wird.
::first-letter Code-Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p::first-letter {
font-size: 35px;
color: #1c87c9;
}
</style>
</head>
<body>
<h2>::first-letter selector example</h2>
<p>-Lorem ipsum is simply dummy text...</p>
<p>1Lorem ipsum is simply dummy text...</p>
</body>
</html>Beispiel einer Drop Cap:
Eine klassische Verwendung von ::first-letter ist die Drop Cap, bei der der Anfangsbuchstabe vergrößert und gefloatet wird, sodass die folgenden Zeilen um ihn herum umbrechen. Kombinieren Sie eine große font-size, float: left und ein wenig padding, um diesen Effekt zu erzielen.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p::first-letter {
font-size: 3em;
font-weight: bold;
color: #1c87c9;
float: left;
padding-right: 8px;
line-height: 1;
}
</style>
</head>
<body>
<p>
Drop caps draw the reader's eye to the start of a paragraph. They
are a long-standing typographic tradition, and CSS lets you add them
with no extra markup at all.
</p>
</body>
</html>Verwandte Ressourcen
- CSS ::first-line — gestaltet die gesamte erste Zeile statt nur den ersten Buchstaben.
- CSS float — wird benötigt, um Text um eine Drop Cap fließen zu lassen.
- CSS text-transform — in Kombination mit
::first-letterverwendbar, um das erste Zeichen zu kapitalisieren.