::первая-буква

Первую букву элемента не всегда легко определить:

• Знаки препинания, предшествующие или непосредственно следующие за первой буквой, включаются в совпадение. Знаки препинания включают любой символ Юникода, определённый в классах открытие (Ps), закрытие (Pe), начальная кавычка (Pi), конечная кавычка (Pf) и другие знаки препинания (Po).
• Некоторые языки имеют диграфы, которые всегда пишутся заглавными буквами вместе, например, IJ в голландском языке. В таких случаях обе буквы диграфа должны быть сопоставлены псевдоэлементом ::first-letter.
• Сочетание псевдоэлемента ::before и свойства content может вставить некоторый текст в начале элемента. В этом случае ::first-letter будет соответствовать первой букве этого сгенерированного контента.

Только небольшой подмножество свойств CSS может быть использовано с псевдоэлементом ::first-letter:

• Все свойства шрифта: 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 и font-family
• Все свойства фона: background, background-color, background-image, background-clip, background-origin, background-position, background-repeat, background-size, background-attachment и background-blend-mode
• Все свойства отступов: margin, margin-top, margin-right, margin-bottom, margin-left
• Все свойства полей: padding, padding-top, padding-right, padding-bottom, padding-left
• Все свойства границ: сокращения border, border-style, border-color, border-width, border-radius, border-image, и отдельные свойства
• Свойство color
• Свойства text-decoration, text-shadow, text-transform, letter-spacing, word-spacing (если применимо), line-height, text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align (только если float равно none).

В этом примере мы будем использовать псевдоэлемент ::first-letter для создания эффекта «падающей» буквы в начале абзаца, следующего за <h2>.

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

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;
}

Результат

Этот пример демонстрирует влияние ::first-letter на знаки препинания и нелатинские символы.

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

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

Результат

В этом примере мы используем псевдоэлемент ::first-letter для стилизации первой буквы элемента SVG <text>.

HTML

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

CSS

text {
  font-family: sans-serif;
}

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

Результат

• ::first-line