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

Свойство text-decoration-color используется для установки цвета декорирования текста. Вы можете выбрать цвета здесь HTML цвета.

Эти цвета применяются к таким декорациям, как верхние подчеркивания, нижние подчеркивания и волнистые линии.

Свойство text-decoration-color является одним из свойств CSS3.

Начальное значение	currentColor
Применяется к	Ко всем элементам. Также применяется к ::first-letter и ::first-line.
Наследуется	Нет.
Анимация	Да. Цвет можно анимировать.
Версия	CSS Text Decoration Module Level 3
Синтаксис DOM	object.style.textDecorationColor = "#ccc";

Синтаксис

Синтаксис CSS text-decoration-color

css

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

INFO

Примечание: Использование сокращенного свойства text-decoration сбрасывает text-decoration-color в currentColor.

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

Пример кода CSS text-decoration-color

html

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

Try it Yourself »

Результат

CSS text-decoration-color

Пример свойства text-decoration-color со значениями "underline" и "line-through":

Пример всех значений CSS text-decoration-color

html

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

Try it Yourself »

Значения

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

Практика

Что можно установить с помощью свойства 'text-decoration-color' в CSS?

Позволяет установить цвет подчеркивания, заданного с помощью 'text-decoration'.Регулирует размер шрифта.Изменяет стиль текста.Позволяет установить цвет зачеркивания, заданного с помощью 'text-decoration'.Изменяет цвет фона страницы.

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

Синтаксис ​

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

Результат ​

Пример свойства text-decoration-color со значениями "underline" и "line-through": ​

Значения ​