Урок 5 із 104
5%
← Назад

Перший рядок у CSS

Вивчаємо псевдоелемент ::first-line, який дозволяє стилізувати лише перший рядок тексту.

Перший рядок у CSS

Псевдоелемент ::first-line дозволяє застосувати стилі тільки до першого рядка тексту всередині елемента. Якщо ширина елемента зміниться, браузер автоматично визначить новий перший рядок.

Синтаксис


p::first-line {
  color: red;
  font-weight: bold;
}

Приклад

У цьому прикладі перший рядок абзацу стане червоним і жирним.


<p>
  Це довгий текст, який займає кілька рядків.
  Перший рядок буде виділений іншим стилем,
  а решта тексту залишиться без змін.
</p>

p {
  width: 350px;
  font-size: 18px;
  line-height: 1.5;
}

p::first-line {
  color: red;
  font-weight: bold;
}
❗ Важливо:

Псевдоелемент ::first-line можна використовувати лише з блоковими елементами (наприклад, p або div). Не всі CSS-властивості підтримуються для цього псевдоелемента.

Практичне завдання

📌 Завдання:
  1. №1. Даний абзац із довгим текстом.
  2. №2. За допомогою ::first-line зробіть перший рядок синім.
  3. №3. Збільште розмір шрифту першого рядка до 24px.
💡 Показати підказку

Створіть правило для псевдоелемента p::first-line та застосуйте до нього потрібні CSS-властивості.

✅ Показати відповідь

p::first-line {
  color: blue;
  font-size: 24px;
}