Веб-розробка включає безліч можливостей для створення ефектних і інтерфейсів користувача. Одним із ключових завдань веб-розробника є створення стилів для веб-сторінки за допомогою CSS. Одним із важливих елементів стилізації є нижня лінія, яка може використовуватись для виділення заголовків, посилань чи інших елементів на сторінці.
У CSS існує кілька способів створення нижньої лінії. Один із найпростіших способів – використання властивості border-bottom. Ця властивість дозволяє встановити стиль, товщину і колір лінії. Наприклад, щоб створити нижню лінію для заголовка, можна використовувати наступний код:
У цьому прикладі ми задали товщину лінії один піксель і колір лінії – чорний. Також можна використовувати інші одиниці вимірювання для завдання товщини лінії, наприклад пікселі, відсотки або em.
Ще один спосіб створення нижньої лінії – використання псевдоелементу :: after. Псевдоелементи дозволяють додати додаткові елементи на сторінку, не змінюючи HTML-код. Наприклад, щоб створити нижню лінію для абзацу, можна використовувати наступний код:
Текст абзацу
.underline::after {
content: "";
display: block;
border-bottom: 1px solid black;
}
У цьому прикладі ми створили псевдоелемент ::after, який додає порожній блок після абзацу. Потім ми задали стиль, товщину та колір лінії для цього блоку.
Крім того, CSS надає інші можливості для створення нижньої лінії, такі як використання властивості text-decoration або використання фонового зображення.Однак, найбільш простими та зручними способами є використання властивості border-bottom та псевдоелементу :: after.
| Стиль | Опис | приклад |
|---|---|---|
| border-bottom | Встановлює нижню межу елемента | Текст із нижньою лінією |
| text-decoration | Додає декоративне оформлення до тексту | Підкреслений текст |
| box-shadow | Додає тінь до елементу | Текст із тінню |
Отже, якщо нам потрібно розмістити вертикальну або горизонтальну лінію зверху або з лівого боку елемента, то потрібно використовувати псевдоелемент :before. Якщо ж лінія має бути праворуч або знизу, то ми повинні використовувати псевдоелемент: after.
Скорочена властивість CSS border-bottom описує нижній кордон елемент border. Воно встановлює значення border-bottom-width (en-US), border-bottom-style (en-US) та border-bottom-color (en-US).
Щоб створити лінію під текстом, слід додати до елементу стильову властивість border-bottom, його значенням виступає одночасно товщина лінії, її стиль та колір (Приклад 1). Відстань від лінії до тексту можна регулювати властивістю padding-bottom, додаючи його до селектора H1. Результат цього прикладу показано на рис.