Пошук уроків, статей та іншого контенту
Додавайте, прибирайте та налаштовуйте підкреслення й інші лінії тексту через text-decoration.
Властивість text-decoration додає до тексту декоративні лінії. Найчастіше її використовують для:
підкреслення тексту;
закреслення тексту;
лінії над текстом;
видалення стандартного підкреслення в посилань.
Декоративна лінія не змінює структуру HTML і не додає окремий елемент на сторінку.
<p class="underlined">Підкреслений текст</p>
<p class="crossed-out">Закреслений текст</p>
<p class="overlined">Текст із лінією зверху</p>.underlined {
text-decoration: underline;
}
.crossed-out {
text-decoration: line-through;
}
.overlined {
text-decoration: overline;
}text-decorationНайпростіший синтаксис:
селектор {
text-decoration: значення;
}Основні значення:
underline — підкреслення;
overline — лінія над текстом;
line-through — закреслення;
none — без декоративної лінії.
.title {
text-decoration: underline;
}Закреслення часто використовують для товарів зі старою ціною або для позначення неактуального тексту.
.old-price {
text-decoration: line-through;
}.important {
text-decoration: overline;
}Значення none прибирає декоративну лінію.
a {
text-decoration: none;
}За замовчуванням браузер зазвичай підкреслює текст посилань. Таке підкреслення допомагає користувачам зрозуміти, що текст є посиланням. Якщо прибрати його, варто додати інший помітний стиль, наприклад зміну кольору або оформлення під час наведення.
Властивість text-decoration може містити кілька значень. За її допомогою можна одночасно вказати:
тип лінії;
стиль лінії;
колір;
товщину.
.heading {
text-decoration: underline solid #2563eb 3px;
}У цьому прикладі:
underline — підкреслення;
solid — суцільна лінія;
#2563eb — колір;
3px — товщина.
Порядок цих значень не обов’язково має бути саме таким, але для початку зручно використовувати зрозумілий порядок.
Замість скороченого запису можна використовувати окремі властивості.
text-decoration-lineВизначає тип лінії.
.example {
text-decoration-line: underline;
}Можна вказати кілька типів одночасно:
.example {
text-decoration-line: underline overline;
}text-decoration-styleВизначає стиль лінії.
Доступні поширені значення:
solid — суцільна;
double — подвійна;
dotted — крапкова;
dashed — штрихова;
wavy — хвиляста.
.warning {
text-decoration-line: underline;
text-decoration-style: wavy;
}text-decoration-colorВизначає колір лінії.
.note {
text-decoration-line: underline;
text-decoration-color: tomato;
}Колір тексту та колір лінії можуть бути різними:
.note {
color: #222;
text-decoration: underline;
text-decoration-color: #e11d48;
}text-decoration-thicknessВизначає товщину лінії.
.subtitle {
text-decoration-line: underline;
text-decoration-thickness: 2px;
}Також можна використовувати значення auto, щоб браузер сам визначив товщину:
.subtitle {
text-decoration-thickness: auto;
}Властивість text-underline-offset змінює відстань між текстом і підкресленням.
.link {
text-decoration: underline;
text-underline-offset: 5px;
}Що більше значення, то далі лінія від тексту:
.link {
text-decoration: underline 2px;
text-underline-offset: 0.2em;
}Одиниця em залежить від розміру шрифту елемента. Це зручно, коли підкреслення має масштабуватися разом із текстом.
У наступному прикладі використано різні види декоративних ліній.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Декоративні лінії тексту</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.8;
color: #1f2937;
}
.standard-link {
color: #2563eb;
text-decoration: underline;
text-underline-offset: 4px;
}
.custom-underline {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: #dc2626;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
.old-price {
color: #6b7280;
text-decoration: line-through;
text-decoration-thickness: 2px;
}
.special-text {
text-decoration: overline underline;
text-decoration-style: double;
text-decoration-color: #7c3aed;
}
.plain-link {
color: #059669;
text-decoration: none;
}
.plain-link:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
</style>
</head>
<body>
<h1>Декоративні лінії тексту</h1>
<p>
<a class="standard-link" href="https://example.com">
Звичайне підкреслене посилання
</a>
</p>
<p class="custom-underline">
Текст із хвилястим підкресленням
</p>
<p class="old-price">Стара ціна: 500 грн</p>
<p class="special-text">
Текст із подвійними лініями
</p>
<p>
<a class="plain-link" href="https://example.com">
Посилання без постійного підкреслення
</a>
</p>
</body>
</html>Ці два варіанти задають однаковий стиль:
.title {
text-decoration: underline wavy #2563eb 2px;
}.title {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: #2563eb;
text-decoration-thickness: 2px;
}Скорочений запис зручний для коротких стилів. Окремі властивості можуть бути зрозумілішими, коли потрібно налаштувати лише одну характеристику або поступово змінювати стиль.
Декоративна лінія, задана батьківському елементу, може проходити через його дочірній текст. Власну лінію дочірнього елемента не завжди можна просто скасувати значенням none.
Наприклад:
<p class="parent">
Основний текст <span>частина тексту</span>
</p>.parent {
text-decoration: underline;
}
.parent span {
text-decoration: none;
}Щоб точно керувати окремими частинами тексту, краще задавати декоративну лінію безпосередньо потрібному елементу:
.parent {
text-decoration: none;
}
.parent span {
text-decoration: underline;
}text-decoration замість border-bottomtext-decoration призначена саме для декоративних ліній тексту. Вона добре підходить для підкреслення слів і посилань.
border-bottom є рамкою елемента, а не лінією тексту. Вона може мати інше розташування та впливати на розміри елемента. Для звичайного підкреслення тексту краще починати з text-decoration.
none і initiala {
text-decoration: none;
}none явно прибирає декоративну лінію.
a {
text-decoration: initial;
}initial встановлює початкове значення властивості, а не просто описує намір прибрати лінію. Для видалення підкреслення використовуйте саме none.
Якщо прибрати підкреслення у посилання, користувачу може бути складніше відрізнити його від звичайного тексту. Подбайте про інший чіткий спосіб позначення:
a {
color: #2563eb;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}Закреслення має зрозуміле значення: текст більше не актуальний, його скасовано або замінено. Не використовуйте його лише як декоративний ефект, якщо це може заплутати користувача.
text-decoration додає або прибирає декоративні лінії тексту.
underline створює підкреслення.
overline додає лінію над текстом.
line-through закреслює текст.
none прибирає лінію.
За допомогою text-decoration-style, text-decoration-color і text-decoration-thickness можна налаштувати вигляд лінії.
text-underline-offset змінює відстань підкреслення від тексту.
Для посилань без підкреслення варто передбачити інший помітний стиль.