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

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

В CSS3 появилась запись ::first-line (с двумя двоеточиями) для различения псевдоклассов и псевдоэлементов. Браузеры также поддерживают запись :first-line, введённую в CSS2.

Разрешённые свойства

Только небольшое подмножество CSS-свойств может быть использовано с псевдоэлементом ::first-line:

Синтаксис

/* CSS3 syntax */
::first-line

/* CSS2 syntax */
:first-line

Пример

HTML

<p>Стили будут применены только к первой строке этого параграфа.
После этого, весь текст будет отображаться как обычно. Увидели, что я имею в виду?</p>

<span>Первая строка этого элемента не будет стилизована специальным образом
потому что это не блочный элемент.</span>

CSS

::first-line {
  color: blue;
  text-transform: uppercase;


  /* ПРЕДУПРЕЖДЕНИЕ: НЕ ИСПОЛЬЗУЙТЕ ЭТО */
  /* Многие свойства запрещены в псевдоэлементах ::first-line */
  margin-left: 20px;
  text-indent: 20px;
}

Результат

Спецификации

Спецификация Статус Комментарий
CSS Pseudo-Elements Level 4
Определение '::first-line' в этой спецификации.
Рабочий черновик Более точно определяет, где ::first-letter может использоваться.
Обобщает разрешённые свойства до типографических, оформления текста, инлайн свойств разметки и opacity.
Определяет наследование ::first-letter.
CSS Text Decoration Module Level 3
Определение 'text-shadow with ::first-line' в этой спецификации.
Кандидат в рекомендации Разрешает использовать text-shadow с ::first-letter.
Selectors Level 3
Определение '::first-line' в этой спецификации.
Рекомендация Введение синтаксиса с двумя двоеточиями.
CSS Level 2 (Revision 1)
Определение '::first-line' в этой спецификации.
Рекомендация Нет измененений.
CSS Level 1
Определение '::first-line' в этой спецификации.
Рекомендация Изначальное определение, используя синтаксис с одним двоеточием.

Поддержка браузерами

ВозможностьChromeEdgeFirefoxInternet ExplorerOperaSafari
Базовая поддержка

11

11 2

Да

Да2

1

12

9

5.52

73

3.52 3

14

12 4

ВозможностьAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Базовая поддержка Да ?

Да

Да2

4

42

? ? ?

1. Before Chrome 62, the text-transform property does not work on ::first-line pseudo-elements. See Chromium bug 129669.

2. Supported as :first-line.

3. From Opera 15 to Opera 49 (exclusive), the text-transform property does not work on ::first-line or :first-line pseudo-elements. See Chromium bug 129669.

4. The text-transform property does not work for ::first-line or :first-line pseudo-elements. See WebKit bug 3409.

См. также

Метки документа и участники

 Внесли вклад в эту страницу: dima74
 Обновлялась последний раз: dima74,