::first-line

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

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

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

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

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

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

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

• Усі властивості, пов'язані зі шрифтом: font, font-kerning, font-style, font-variant, font-variant-numeric, font-variant-position, font-variant-east-asian, font-variant-caps, font-variant-alternates, font-variant-ligatures, font-synthesis, font-feature-settings, font-language-override, font-weight, font-size, font-size-adjust, font-stretch і font-family
• Усі властивості, пов'язані зі тлом: background-color, background-clip, background-image, background-origin, background-position, background-repeat, background-size, background-attachment і background-blend-mode
• Властивість color
• word-spacing, letter-spacing, text-decoration, text-transform і line-height
• text-shadow, text-decoration, text-decoration-color, text-decoration-line, text-decoration-style і vertical-align.

Синтаксис

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

Приклади

Оформлення першої лінії абзацу

HTML

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

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

CSS

* {
  font-size: 20px;
  font-family: sans-serif;
}

::first-line {
  color: blue;
  font-weight: bold;

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

Результат

Оформлення першої лінії елемента SVG text

У цьому прикладі за допомогою псевдоелемента ::first-line оформлюється перша лінія елемента SVG <text>.

Примітка: На час написання цих рядків ця можливість має обмежену підтримку.

HTML

<svg viewBox="0 0 320 150">
  <text y="20">Це абзац українською мовою,
розбитий на кілька ліній
у вихідному коді, щоб його
можна було легше читати та редагувати
в текстовому редакторі.
  </text>
</svg>

CSS

Щоб змусити елемент SVG <text> переноситися на кілька ліній, використовується властивість CSS white-space. Потім перша лінія обирається за допомогою псевдоелемента ::first-line.

text {
  font-size: 20px;
  font-family: sans-serif;
}

text {
  white-space: break-spaces;
}

text::first-line {
  fill: blue;
  font-weight: bold;
}

Результат

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

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

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

• ::first-letter
• white-space