Клавиша / esc

::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-свойств:

Подсказки

Скопировано

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

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