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

Свойство text-decoration-color устанавливает цвет текстового оформления. Можете выбрать цвет отсюда: HTML Цвета.

Значение по умолчанию currentColor
Применяется Ко всем элементам, а также к ::first-letter и ::first-line.
Наследуется Нет
Анимируемое Да. Цвет анимируем.
Версия CSS1, CSS3
DOM синтаксис object.style.textDecorationColor = "#ccc";

Синтаксис

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

Пример

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

Рассмотрим другой пример со свойством text-decoration-color:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p { 
      text-decoration-line: underline;
      text-decoration-color: #666;
      text-decoration-style: wavy;
      }
      s {
      text-decoration-line: line-through;
      text-decoration-color: #c91010;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства text-decoration-color</h2>
    <p>Lorem ipsum<s>это текст-"рыба"</s>...</p>
  </body>
</html>

Значения

Значение Описание
color Устанавливает цвет текстового оформления. Могут быть использованы названия цветов, цветовые коды hexadecimal, rgb(), rgba(), hsl(), hsla().
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

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

chrome edge firefox safari opera
57.0+ 36.0+ 12.1+ 44.0+

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

Что означает свойство text-decoration-color в CSS?
Считаете ли это полезным?