Клавиша / esc

::first-line

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

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

Кратко

Скопировано

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

Пример

Скопировано

Напишем код, который видоизменит первую строку текста:

        
          
          p::first-line {  text-transform: uppercase;  text-decoration: underline;  font-weight: bold;  color: deepPink;}
          p::first-line {
  text-transform: uppercase;
  text-decoration: underline;
  font-weight: bold;
  color: deepPink;
}

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

Как пишется

Скопировано

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

Подсказки

Скопировано

💡 Первая строка в блоке может быть пустой, например если после тега <p> сразу идёт тег <br>, а после него остальной текст. В таком случае стили будут применяться к первой пустой строке и видимого результата не будет.