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' в этой спецификации.
Рекомендация Изначальное определение, используя синтаксис с одним двоеточием.

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidiOS SafariSamsung Internet
Базовая поддержкаChrome Полная поддержка 1
Замечания
Полная поддержка 1
Замечания
Замечания Before Chrome 62, the text-transform property does not work on ::first-line pseudo-elements. See Chromium bug 129669.
Полная поддержка 1
Замечания Альтернативное имя
Замечания Before Chrome 62, the text-transform property does not work on ::first-line pseudo-elements. See Chromium bug 129669.
Альтернативное имя Использует нестандартное имя: :first-line
Edge Полная поддержка Да
Полная поддержка Да
Полная поддержка Да
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :first-line
Firefox Полная поддержка 1
Полная поддержка 1
Полная поддержка 1
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :first-line
IE Полная поддержка 9
Полная поддержка 9
Полная поддержка 5.5
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :first-line
Opera Полная поддержка 7
Замечания
Полная поддержка 7
Замечания
Замечания 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.
Полная поддержка 3.5
Замечания Альтернативное имя
Замечания 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.
Альтернативное имя Использует нестандартное имя: :first-line
Safari Полная поддержка 1
Замечания
Полная поддержка 1
Замечания
Замечания The text-transform property does not work for ::first-line or :first-line pseudo-elements. See WebKit bug 3409.
Полная поддержка 1
Замечания Альтернативное имя
Замечания The text-transform property does not work for ::first-line or :first-line pseudo-elements. See WebKit bug 3409.
Альтернативное имя Использует нестандартное имя: :first-line
WebView Android Полная поддержка ДаChrome Android ? Edge Mobile Полная поддержка Да
Полная поддержка Да
Полная поддержка Да
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :first-line
Firefox Android Полная поддержка 4
Полная поддержка 4
Полная поддержка 4
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :first-line
Opera Android ? Safari iOS ? Samsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Совместимость неизвестна  
Совместимость неизвестна
Смотрите замечания реализации.
Смотрите замечания реализации.
Использует нестандартное имя.
Использует нестандартное имя.

См. также

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

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