CSS псевдоэлемент ::first-line

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

/* Выбор первой строки в элементе <p> */
p::first-line { color: red; }

CSS свойство background совместно с псевдоэлементом ::first-line будет применяться к первой строке текста, как к строчному элементу, то есть фон будет распространён только на область с текстом, а не на всю ширину элемента.

В блоке объявлений для псевдоэлемента ::first-line возможно использование следующих CSS свойств:

• все свойства font;
• все свойства background;
• свойство color;
• свойство letter-spacing;
• свойство line-height;
• свойство text-decoration;
• свойство text-decoration-color;
• свойство text-decoration-line;
• свойство text-decoration-style;
• свойство text-shadow;
• свойство text-transform;
• свойство vertical-align;
• свойство word-spacing.

Пример

html { 
  background: #fff2e6;
  color: #663300;
}

p { max-width: 500px; }

p::first-line { color: #cc6600; }

<h1>Всемирный фонд дикой природы</h1>

<p>Для остановки деградации естественной среды планеты
  и постройки будущего, в котором люди живут в гармонии
  с природой, нужно содействовать уменьшению загрязнения
  и расточительного потребления природных ресурсов.</p>