::first-line

Псевдоелемент CSS ::first-line (перша лінія) застосовує стилі до першої лінії блокового контейнера.

Спробуйте його в дії

Дія ::first-line обмежена довжиною та вмістом першої лінії тексту в елементі. Довжина першої лінії залежить від багатьох чинників, серед яких ширина елемента, ширина документа та розмір шрифту тексту. Псевдоелемент ::first-line не діє, коли перший дочірній елемент, який був би початком першої лінії, є рядковим елементом блокового рівня, наприклад, рядковою таблицею.

Примітка: Селектори рівня 3 запровадили запис із подвійною двокрапкою (::), щоб відрізняти псевдоелементи від псевдокласів з двокрапкою (:). Браузери приймають як ::first-line, так і :first-line – варіант, запроваджений у CSS2.

Для потреб background CSS псевдоелемент ::first-line подібний до елемента рядкового рівня, тобто у шикованій наліво першій лінії фон не може розтягуватися аж до правого зовнішнього відступу.

Припустимі властивості

Лише невелика підмножина властивостей CSS може застосовуватися до псевдоелемента ::first-line:

Синтаксис

::first-line {
  /* ... */
}

Приклади

HTML

<p>
  Стилі будуть застосовані лише до першої лінії цього абзацу. Після цього весь
  текст буде оформлений як зазвичай. Розумієте, що я маю на увазі?
</p>

<span>
  Перша лінія цього тексту не отримає спеціального оформлення, оскільки він не є
  елементом блокового рівня.
</span>

CSS

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

  /* ЗАСТЕРЕЖЕННЯ: НЕ РОБІТЬ ТАК */
  /* Чимало властивостей недійсні для псевдоелементів ::first-line */
  margin-left: 20px;
  text-indent: 20px;
}

Результат

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

Сумісність із браузерами

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
::first-line
Chrome Full support 1
footnote
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 9
Opera Full support 7
footnote
Safari Full support 1
footnote
WebView Android Full support 37
footnote
Chrome Android Full support 18
footnote
Firefox for Android Full support 4
Opera Android Full support 10.1
footnote
Safari on iOS Full support 1
footnote
Samsung Internet Full support 1.0
footnote

Дивіться також