CSS text-decoration — підкреслення й закреслений текст

Властивість text-decoration визначає оздоблення тексту. В CSS3 властивість text-decoration є універсальною властивістю для наступних властивостей.

• text-decoration-line
• text-decoration-color
• text-decoration-style

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

Властивість додає оздоблення понад нащадками. Це означає, що якщо для елементу вказаний text-decoration, то дочірній елемент не може видалити це оформлення. Наприклад, якщо ми маємо абзац з нащадком:

This is text!

Правило text-decoration: underline; додасть лінію для всього абзацу, але правило для text-decoration: none; не призведе до змін; весь абзац все одно буде підкреслено.

правити

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

правити

Нотатка

В CSS3 використовуйте властивість text-decoration-color щоб змінити колір оздоблення.

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

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

Синтаксис

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

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

none

Звичайний текст. Без задання.

автор: Svitlana

правити

underline

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

автор: Svitlana

правити

overline

Лінія над текстом.

автор: Svitlana

правити

line-through

Закреслений текст.

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

blink

Блимання тексту(не підтримується всіма браузерами)

автор: Svitlana

правити

solid

Суцільна лінія

автор: Svitlana

правити

wavy

Лінія у формі хвилі.

автор: Svitlana

правити

dotted

Лінія крапками.

автор: Svitlana

правити

dashed

Лінія рисочками.

автор: Svitlana

правити

double

Подвійна лінія.

автор: Svitlana

правити

<color>

Значення кольору у будь-якому форматі.

автор: Svitlana

правити

Переглядачі

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

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

Переглядач
	1	1	1	3.5	12	3

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

Переглядач
	4.4	18	4	1

Приклади

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

<p class="strike">Стара ціна: 500 грн</p>
<p class="thick">Закреслено товщиною 3px і червоним</p>
<p class="wavy">Хвиляста лінія знизу</p>
<p class="both">Підкреслено й закреслено одночасно</p>

body {
    font-family: sans-serif;
    font-size: 19px;
    line-height: 1.8;
    padding: 20px;
}

.strike {
    text-decoration: line-through;
}

.thick {
    text-decoration: line-through solid #d93526 3px;
}

.wavy {
    text-decoration: underline wavy #0172ad;
    text-underline-offset: 4px;
}

.both {
    text-decoration: underline line-through;
}

<p class="underline">Підкреслений червоним текст</p>

<p class="overline">Текст, а над ним лінія</p>

<p class="through">Перекреслений текст</p>

<p>Це <a class="none" href="#">посилання не підкреслено</a>, а має бути за замовчуванням.</p>

<p class="underover">Підкреслений рядок з лінією над собою.</p>

<p class="blink">Цей текст блимає. Але це залежить від того, чи підртримує цю властивість твій браузер...</p>

.underline {
  text-decoration: underline red;
}

.overline {
  text-decoration: wavy overline lime;
}

.through {
  text-decoration: line-through;
}

.none {
  text-decoration: none;
}

.underover {
  text-decoration: dashed underline overline;
}

.blink {
  text-decoration: blink;
}

<p>This is <strong>text</strong>!</p

p {
	text-decoration: underline;
	font-size: 40px;
	color: #444;
}

p > strong {
	text-decoration: none;
}

<h1>Лінія над текстом</h1>
<h2>Закреслений текст</h2>
<h3>Підкреслений текст</h3>

h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}