`::first-letter`

Стилизуем первую букву в тексте.

Время чтения: меньше 5 мин

Кратко

Скопировано

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

Пример

Скопировано

Напишем код, выделяющий первую букву в цитате:

        
          
          blockquote::first-letter {  font-size: 1.86rem;  font-weight: 700;  font-style: italic;  letter-spacing: 0.12rem;}
          blockquote::first-letter {
  font-size: 1.86rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.12rem;
}

Открыть демо в новой вкладке

Как пишется

Скопировано

Для псевдоэлемента сработает лишь небольшой набор CSS-свойств:

Шорткат font и шрифтовые свойства, начинающиеся на font-;
Шорткат background и свойства фона, начинающиеся на background-;
Шорткат margin и внешние отступы, начинающиеся на margin-;
Шорткат padding и внутренние отступы, начинающиеся на padding-;
Шорткат border и свойства рамок, начинающиеся на border-;
цвет текста 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.

Подсказки

Скопировано

💡 Знаки препинания, которые предшествуют первой букве или непосредственно следуют за ней, попадают под ::first-letter. Как в примере выше, знак кавычки также имеет стили, заданные для первой буквы.

💡 Если вы создаёте содержимое с помощью ::before и content, стили указанные в ::first-letter всё равно будут распространяться на первую букву.