text-decoration

Властивість-скорочення CSS text-decoration задає вигляд оздоблювальних ліній на тексті. Це скорочення властивостей text-decoration-line, text-decoration-color, text-decoration-style, а також новішої властивості text-decoration-thickness.

Спробуйте його в дії

Оздоблення тексту наносяться на всіх текстових нащадків. Це означає, що коли елемент задає оздоблення тексту, то дочірній елемент не може прибрати оздоблення. Наприклад, в розмітці <p>This text has <em>some emphasized words</em> in it.</p> правило стилю p { text-decoration: underline; } зробило б увесь абзац підкресленим. Правило стилю em { text-decoration: none; } нічого б не змінило; увесь абзац і надалі був би підкресленим. Проте правило em { text-decoration: overline; } призвело б до появи другого оздоблення на "певних акцентованих словах".

Складові властивості

Ця властивість є скороченням наступних властивостей CSS:

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

Синтаксис

text-decoration: underline;
text-decoration: overline red;
text-decoration: none;

/* Глобальні значення */
text-decoration: inherit;
text-decoration: initial;
text-decoration: revert;
text-decoration: revert-layer;
text-decoration: unset;

Властивість text-decoration задається у вигляді одного чи більшої кількості розділених пробілами значень, що представляють різні докладні властивості text-decoration.

Значення

text-decoration-line

Задає застосований різновид оздоблення, як то underline (підкреслення) чи line-through (закреслення).

text-decoration-color

Задає колір оздоблення.

text-decoration-style

Задає стиль лінії, що використовується в оздобленні, як то solid (суцільна), wavy (хвиляста) чи dashed (штрихова).

text-decoration-thickness

Задає товщину лінії, що використовується в оздобленні.

Формальне визначення

Формальний синтаксис

<\'text-decoration-line\'> || <\'text-decoration-style\'> || <\'text-decoration-color\'> || <\'text-decoration-thickness\'>

Приклади

Демонстрація значень text-decoration

.under {
  text-decoration: underline red;
}

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

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

.plain {
  text-decoration: none;
}

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

.thick {
  text-decoration: solid underline purple 4px;
}

.blink {
  text-decoration: blink;
}

<p class="under">Цей текст має лінію під собою.</p>
<p class="over">Цей текст має лінію над собою.</p>
<p class="line">Цей текст має лінію, що проходить крізь нього.</p>
<p>
  Це <a class="plain" href="#">посилання не буде підкресленим</a>, на противагу
  усталеному виглядові посилань. Будьте обережними з усуненням оздоблення тексту
  на якорях, адже користувачі нерідко покладаються на підкреслення як позначення
  гіперпосилань.
</p>
<p class="underover">Цей текст має лінії над <em>і</em> під собою.</p>
<p class="thick">
  Цей текст має справді товсте фіолетове підкреслення, в браузерах, що це
  підтримують.
</p>
<p class="blink">
  Цей текст може вам блимати, залежно від браузера, що використовується.
</p>

Результат

Специфікації

Сумісність із браузерами

Дивіться також

• Окремі властивості text-decoration: text-decoration-line, text-decoration-color, text-decoration-style, and text-decoration-thickness.
• Властивості text-decoration-skip-ink, text-underline-offset і text-underline-position також впливають на text-decoration, але не включені в скорочення.
• Властивість list-style контролює вигляд елементів у списках HTML <ol> та <ul>.
• Атрибут SVG text-decoration