Псевдоэлемент CSS `::first-letter`

::first-letter — это CSS-псевдоэлемент, который применяет стили к первой букве первой строки блочного контейнера, но только если перед ней нет другого содержимого (например, изображений или встроенных таблиц).

Попробуйте

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>

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

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

Допустимые свойства

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

• Все свойства шрифта: 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
• Свойства CSS 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 {
  /* ... */
}

Примеры

Простой буквиц

В этом примере мы используем псевдоэлемент ::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%;
}

Результат

Стилизация первой буквы в текстовом элементе SVG

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

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