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

Свойство text-decoration устанавливает оформление текста.

В CSS3 оно является сокращенной формой записи для следующих свойств:

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

Если значение одного из них не указано, будет автоматически установлено значение по умолчанию. Text-decoration-line является обязательным.

В спецификации CSS1 text-decoration не считалось сокращенным свойством и имело следующие значения :

  • none
  • underline
  • overline
  • line-through
  • blink
Значение по умолчанию none currentColor solid
Применяется Ко всем элементам, а также к ::first-letter и ::first-line
Наследуется Нет
Анимируемое Нет
Версия CSS1, CSS3
DOM синтаксис object.style.textDecoration = "dashed";

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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</h2>
    <p class="a">Lorem Ipsum - это текст-"рыба"...</p>
    <p class="b">Lorem Ipsum - это текст-"рыба"...</p>
    <p class="c">Lorem Ipsum - это текст-"рыба"...</p>
    <p class="d">Lorem Ipsum - это текст-"рыба"...</p>
  </body>
</html>

Пример, где указан цвет текста:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p {
      text-decoration: underline;
      -webkit-text-decoration-color: #1c87c9; /* Safari */  
      text-decoration-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства text-decoration</h2>
    <p>Lorem Ipsum - это текст-"рыба"...</p>
  </body>
</html>
В данном примере использовано расширение -webkit- для Safari.

Пример, где указан стиль текста:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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</h2>
    <div class="t1">Lorem Ipsum - это текст-"рыба"...</div>
    <br>
    <div class="t2">Lorem Ipsum - это текст-"рыба"...</div>
    <br>
    <div class="t3">Lorem Ipsum - это текст-"рыба"...</div>
    <br>
    <div class="t4">Lorem Ipsum - это текст-"рыба"...</div>
  </body>
</html>

Значения

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

Поддержка браузера

chrome edge firefox safari opera
1.0+ 12.0+ 1.0+ 1.0+ 3.5+

Практикуйте свои знания

Какие значения могут быть у свойства 'text-decoration' в CSS?
Считаете ли это полезным?