Лінія під текстом – це ефективний спосіб покращити оформлення веб-сторінки та зробити її більш акуратною та професійною. У CSS є кілька способів додати лінію під текстом, і кожен має свої переваги. У цій статті ми розглянемо деякі з них і покажемо, як створювати виразні та стильні лінії, які привертатимуть увагу користувачів.
Один із найпростіших способів додати лінію під текстом – це використовувати властивість text-decoration у CSS. За допомогою цієї властивості ви можете додати не тільки лінію, але й інші декоративні елементи, такі як підкреслення, закреслення та лінія зверху тексту. Щоб додати лінію під текстом, можна просто застосувати значення underline до властивості text-decoration.
Якщо ви хочете створити більш індивідуальний та стильний варіант лінії під текстом, ви можете використати властивість ::after псевдоелемента у CSS. Псевдоелемент ::after дозволяє додати додатковий контент або прикрасу всередині обраного елемента. Щоб створити лінію під текстом за допомогою ::after, можна використовувати властивості content і border-bottom для додавання лінії у потрібному положенні та з потрібними параметрами.
| Стиль | CSS-властивість | Значення | приклад |
|---|---|---|---|
| Підкреслення | text-decoration | underline | Підкреслений текст |
| Перекреслення | text-decoration | line-through | Перекреслений текст |
| Лінія над текстом | text-decoration | overline | Текст із лінією над ним |
| Лінія під текстом | border-bottom | 1px solid | Текст із лінією під ним |
Як зробити лінію після тексту CSS?
Отже, якщо нам потрібно розмістити вертикальну чи горизонтальну лінію зверху або з лівого боку елемента, нам потрібно використовувати псевдоелемент :before. Якщо ж лінія має бути праворуч або знизу, то ми повинні використовувати псевдоелемент: after.
Як зробити смужку знизу CSS?
Горизонтальна лінія робиться за допомогою властивості border-bottom, яка зазвичай застосовується до елемента <div>. Ця властивість додає лінію знизу заданої товщини та стилю (приклад 1). Щоб не «псувати» все, використовуємо клас line, і вже для класу вказуємо властивість border-bottom.
Як зробити лінію під текстом HTML CSS?
Щоб створити лінію під текстом, слід додати до елементу стильову властивість border-bottom, його значенням виступає одночасно товщина лінії, її стиль та колір (Приклад 1). Відстань від лінії до тексту можна регулювати властивістю padding-bottom, додаючи його до селектора H1. Результат цього прикладу показано на рис.
Як зробити лінію ліворуч від тексту CSS?
Для виведення лінії зліва від тексту застосовується властивість border-left, воно створює лінію заданої товщини, стилю та кольору. При цьому висота лінії прив'язується до висоти тексту та змінюється разом із ним. Щоб лінія та фон не прилягали щільно до тексту, відстань від краю до тексту регулюється за допомогою padding.