::first-line

Псевдоэлемент ::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-свойств:

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

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