Свойство CSS text-decoration

Свойство CSS text-decoration добавляет декоративные линии к тексту — чаще всего это подчёркивание под ссылкой, зачёркивание удалённого текста или надчёркивание для выделения. Именно к этому свойству обращаются, когда нужно добавить (или, что не менее распространено, удалить) подобные линии.

На этой странице рассматриваются сокращённый синтаксис, все допустимые значения, взаимодействие с отдельными свойствами-составляющими и практические случаи применения (например, оформление ссылок).

Что делает text-decoration

В CSS3 text-decoration является сокращённым свойством, которое одновременно задаёт три отдельных свойства:

text-decoration-line — какие линии отображаются (underline, overline, line-through или несколько сразу).
text-decoration-color — цвет линии (по умолчанию совпадает с цветом текста элемента, currentColor).
text-decoration-style — стиль линии (solid, double, dotted, dashed, wavy).

Поскольку это сокращённое свойство, любое не указанное составляющее сбрасывается до начального значения. Сама линия, text-decoration-line, по умолчанию равна none — именно поэтому text-decoration: none является стандартным способом убрать подчёркивание у ссылки.

В оригинальной спецификации CSS1 text-decoration не было сокращённым свойством. Это было единственное свойство, принимавшее только следующие ключевые слова:

none
underline
overline
line-through
blink (устарело и игнорируется современными браузерами)

Сокращённое свойство CSS3 является надмножеством этого списка, поэтому старые объявления с одним ключевым словом, например text-decoration: underline, работают точно так же, как прежде.

Когда использовать

Удаление подчёркивания ссылок: a { text-decoration: none; } — затем добавьте собственные стили при наведении.
Обозначение правок: line-through для удалённого текста, underline для вставленного.
Нестандартные подчёркивания: сочетайте цвет и стили wavy/dotted для подчёркивания в стиле проверки орфографии или брендированного оформления ссылок.

Примечание по доступности: подчёркивание — общепринятый сигнал того, что текст является ссылкой. Если вы убираете его, сделайте ссылки различимыми каким-либо другим способом (явным цветовым отличием и подчёркиванием при наведении/фокусе), чтобы ссылка оставалась очевидной для всех пользователей.

Свойство	Подробности
Начальное значение	`none currentColor solid` (начальное значение каждого составляющего свойства)
Применяется к	Всем элементам. Также применяется к ::first-letter и ::first-line.
Наследуется	Нет.
Анимируемо	Нет.
Версия	CSS1, CSS3
DOM-синтаксис	`object.style.textDecoration = "underline dotted red";`

Синтаксис

text-decoration: <line> <color> <style> | initial | inherit;

<line> — одно или несколько ключевых слов text-decoration-line (none, underline, overline, line-through).
<color> — любое значение цвета CSS.
<style> — одно ключевое слово text-decoration-style (solid, double, dotted, dashed, wavy).

Порядок трёх частей не важен, любую из них можно опустить. Несколько значений line можно комбинировать — например, underline overline рисует обе линии одновременно:

/* underline, in red, with a wavy style */
text-decoration: underline wavy red;

/* two lines at once; color and style fall back to defaults */
text-decoration: underline overline;

Пример свойства text-decoration:

Пример свойства CSS text-decoration со значениями overline, line-through, underline и overline

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .a {
        text-decoration: overline;
      }
      .b {
        text-decoration: line-through;
      }
      .c {
        text-decoration: underline;
      }
      .d {
        text-decoration: underline overline;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration property example</h2>
    <p class="a">Lorem Ipsum is simply dummy text...</p>
    <p class="b">Lorem Ipsum is simply dummy text...</p>
    <p class="c">Lorem Ipsum is simply dummy text...</p>
    <p class="d">Lorem Ipsum is simply dummy text...</p>
  </body>
</html>

Попробуйте сами »

Результат

Пример свойства text-decoration с указанным цветом:

Пример свойства CSS text-decoration со свойством text-decoration-color

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        text-decoration: underline;
        text-decoration-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration property example</h2>
    <p>Lorem ipsum is simply dummy text...</p>
  </body>
</html>

Попробуйте сами »

Информация

Префикс -webkit- здесь опущен, так как современные браузеры полностью поддерживают стандартное свойство.

Пример свойства text-decoration с указанным стилем:

Пример свойства CSS text-decoration со свойствами text-decoration-line и text-decoration-style

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        text-decoration-line: underline;
      }
      div.t1 {
        text-decoration-style: dotted;
      }
      div.t2 {
        text-decoration-style: wavy;
      }
      div.t3 {
        text-decoration-style: solid;
      }
      div.t4 {
        text-decoration-line: overline underline;
        text-decoration-style: double;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration property example</h2>
    <div class="t1">Lorem ipsum is simply dummy text...</div>
    <br />
    <div class="t2">Lorem ipsum is simply dummy text...</div>
    <br />
    <div class="t3">Lorem ipsum is simply dummy text...</div>
    <br />
    <div class="t4">Lorem ipsum is simply dummy text...</div>
  </body>
</html>

Попробуйте сами »

Значения

Значение	Описание
text-decoration-line	Задаёт тип оформления текста.
text-decoration-color	Задаёт цвет оформления текста.
text-decoration-style	Задаёт стиль оформления текста.
initial	Устанавливает значение свойства по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Связанные свойства

text-decoration-line — задайте линию(и) отдельно.
text-decoration-color — задайте цвет оформления независимо от цвета текста.
text-decoration-style — выберите стиль линии: solid, double, dotted, dashed или wavy.

Практика

Какое CSS-свойство изменяет отображение строчного текста, добавляя эффекты вроде подчёркивания или зачёркивания?

text-styletext-decorationtext-effectstext-modifier