CSS ::first-letter: псевдоэлемент для первой буквы

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

Псевдоэлемент действует только тогда, когда свойство display элемента имеет значение block, inline-block, list-item, table-cell или table-caption. На строчные элементы, такие как <span> или изображения, он не влияет, поскольку те не начинают новую строку.

Если перед первой буквой или сразу после неё стоит знак препинания (например, кавычки, скобки или тире), этот знак включается в совпадение вместе с буквой. Псевдоэлемент нацелен на первую типографическую единицу буквы, поэтому ведущий символ или цифра стилизуется вместе со следующей за ним буквой.

Информация

В CSS3 была введена запись с двойным двоеточием (::first-letter), чтобы отличать псевдоэлементы от псевдоклассов. Старая форма с одним двоеточием (:first-letter) по-прежнему поддерживается браузерами для обратной совместимости, однако в современном коде предпочтительна запись с двойным двоеточием.

Когда использовать

Используйте ::first-letter, когда нужно:

Создать буквицу — увеличить и обтечь текстом начальную букву статьи или главы.
Применить особый цвет, шрифт или начертание к ведущему символу заголовка или абзаца.
Воспроизвести типографику в стиле печати в вебе без добавления лишней разметки вокруг первого символа.

Поскольку эффект является сугубо презентационным, HTML остаётся чистым: нет необходимости оборачивать букву в <span class="first">.

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

Ниже перечислены CSS-свойства, которые можно использовать с псевдоэлементом ::first-letter:

Свойства шрифта: 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 и font-family.

Свойства фона: background, background-origin, background-position, background-repeat, background-size, background-attachment, background-blend-mode, background-color, background-image и background-clip.

Свойства отступов (внешних): margin, margin-top, margin-right, margin-bottom, margin-left.

Свойства отступов (внутренних): padding, padding-top, padding-right, padding-bottom, padding-left.

Свойства границ: сокращённые записи, border-style, border-color, border-width, border-radius, border-image, полные записи.

Свойство color.

Свойства text-decoration, text-shadow, text-transform, letter-spacing, word-spacing (при необходимости), text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align (только float: none;).

Версия

Selectors Level 3

CSS Level 2 (Revision 1)

CSS Level 1

Синтаксис

Пример синтаксиса CSS ::first-letter

::first-letter {
  css declarations;
}

Пример использования псевдоэлемента ::first-letter:

Пример кода CSS ::first-letter

<!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>

Попробуйте сами »

Результат

Первая буква абзаца отображается размером 35px и синим цветом, тогда как остальной текст сохраняет стандартный размер и цвет.

Пример псевдоэлемента ::first-letter со знаком препинания и цифрой:

В следующем примере первый абзац начинается с тире, а второй — с цифры. Обратите внимание: ведущее тире стилизуется вместе с первой буквой, тогда как ведущая цифра стилизуется отдельно как первый символ строки.

Пример кода ::first-letter

<!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>

Попробуйте сами »

Пример буквицы:

Классическое применение ::first-letter — буквица, где начальная буква увеличивается и обтекается последующими строками текста. Для достижения эффекта комбинируйте большой font-size, float: left и небольшой padding.

<!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>

Связанные ресурсы

CSS ::first-line — стилизует всю первую строку, а не только первую букву.
CSS float — необходим для обтекания текста вокруг буквицы.
CSS text-transform — используйте в сочетании с ::first-letter для написания начального символа в верхнем регистре.

Практика

Как работает псевдоэлемент CSS ::first-letter?

Он выбирает и стилизует первую букву каждого абзаца.Он выбирает и стилизует последнюю букву каждого абзаца.Его можно использовать с блочными элементами и ячейками таблицы.Его можно использовать для выбора и стилизации первой буквы каждого слова в абзаце.