CSS text-decoration-line — підкреслення тексту

CSS властивість text-decoration-line визначає розміщення декоративної лінії - під текстом, посередині, над текстом.

Одночасно дозволено застосовувати більш декілька стилів, перераховуючи значення через пропуск.

правити

Загальний опис

правити

Нотатка

При одночасному налаштуванні декількох властивостей оздоблення рядка, можливо, буде зручніше скористатися властивістю text-decoration.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

text-decoration-line: none|underline|overline|line-through|initial|inherit;

Властивість text-decoration-line може отримувати 6 значень:

none

Текст без декоративної лінії. Без задання. Примітка: Підкреслення у посилань, теж, зникне.

автор: Svitlana

правити

underline

Підкреслений текст.

автор: Svitlana

правити

overline

Декоративна лінія над текстом.

автор: Svitlana

правити

line-through

Перекреслений текст.

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента.

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	57	36	12.1	44	79	—

Підтримка: мобільні переглядачі

Переглядач
	57	57	36	12.2

Приклади

+ запропонувати свій приклад у пісочниці

<p>Лінія над цим рядком.</p>

p {
    text-decoration-line: overline;
}

<p class="dec">Лінію задано абзацу, і <span class="off">цей фрагмент її не прибирає</span>.</p>

<p class="dec">А <span class="fix">цей фрагмент прибирає</span>, бо він inline-block.</p>

body {
  font-family: sans-serif;
  font-size: 18px;
  padding: 16px;
}

.dec {
  text-decoration-line: underline;
}

/* не спрацює: лінію малює абзац */
.off {
  text-decoration-line: none;
}

/* спрацює: інший тип блока */
.fix {
  text-decoration-line: none;
  display: inline-block;
}

<p class="line-through">This is <strong>text</strong>!</p>
<p class="overline">This is <strong>text</strong>!</p>
<p class="underline">This is <strong>text</strong>!</p>

.line-through {
	font-size: 40px;
	color: #444;
	text-decoration-color: red;
	text-decoration-line: line-through;
}
.overline{
  font-size: 40px;
	color: #444;
	text-decoration-color: red;
	text-decoration-line: overline;
}
.underline{
  font-size: 40px;
	color: #444;
	text-decoration-color: red;
	text-decoration-line: underline;
}