CSS ::first-line — стиль першого рядка
Селектор ::first-line задає стиль першого рядка визначеного елемента.
Селектор ::first-line може бути використаний тільки для блокових елементів.
Наступні властивості можуть бути використані з ::first-line:
- font
- color
- background
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
Загальний опис
автор: NagarD
Синтаксис
::first-line {
css declarations;
}Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 7 | 12 | 9 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Жовтим стає лише перший видимий рядок абзацу: звузь чи розшир вікно перегляду — підсвітка завжди триматиметься першого рядка, бо це не фрагмент розмітки, а те, що реально влізло в рядок.
HTML
<p>Перший рядок цього абзацу — жовтий. Далі текст навмисно продовжується достатньо довго, щоб він точно не вмістився в один рядок і різниця була помітна.</p>CSS
p::first-line {
background-color: yellow;
}Змініть ширину вікна результату — і перший рядок стане іншим: межу вирішує браузер.
HTML
<p class="lede">Цей абзац показує, як працює псевдоелемент першого рядка. Спробуйте змінити ширину блоку — і побачите, що оформлення лишається на першому рядку, хоч слова в ньому стають інші.</p>CSS
.lede {
font: 16px/1.7 Georgia, serif;
max-width: 30rem;
}
.lede::first-line {
font-variant: small-caps;
letter-spacing: .04em;
color: #1d4ed8;
}Коментарі
Коментарів ще немає — будьте першим!