text-decoration-color

Базовая линия Широко доступна

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

Свойство text-decoration-color CSS устанавливает цвет декораций, добавляемых к тексту с помощью text-decoration-line.

Цвет применяется к декорациям, таким как подчеркивания, надчеркивания, зачеркивания и волнистые линии, используемые для маркирования опечаток, в рамках значения свойства.

Попробуйте

CSS не предоставляет прямого механизма для указания уникального цвета для каждого типа линии. Тем не менее, этот эффект можно достичь, вложив элементы, применив к каждому элементу различный тип линии (с помощью свойства text-decoration-line) и указав цвет линии (с помощью text-decoration-color) для каждого элемента.

Синтаксис

/* <color> values */
text-decoration-color: currentcolor;
text-decoration-color: red;
text-decoration-color: #00ff00;
text-decoration-color: rgb(255 128 128 / 50%);
text-decoration-color: transparent;

/* Global values */
text-decoration-color: inherit;
text-decoration-color: initial;
text-decoration-color: revert;
text-decoration-color: revert-layer;
text-decoration-color: unset;

Значения

<color>: Цвет линии декорации.

Доступность

Важно обеспечить достаточное отношение контрастности между цветом текста, фоном, на котором он размещен, и линией декорации текста, чтобы люди с нарушениями зрения могли читать содержимое страницы. Отношение контрастности цвета определяется путем сравнения яркости значений цвета текста и фона.

Цвет сам по себе не должен использоваться для передачи смысла. Например, изменение цвета текста и text-decoration-color недостаточно для обозначения того, что ссылка получила фокус.

Формальное определение

Начальное значение	`currentcolor`
Применяется к	всем элементам. Также применяется к `::first-letter` и `::first-line`.
Наследуется	нет
Вычисленное значение	вычисленный цвет
Тип анимации	цвет цвета

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

text-decoration-color = 
  <color>

Примеры

Базовый пример

<p>
  This paragraph has <s>some erroneous text</s> inside it that I want to call
  attention to.
</p>

p {
  text-decoration-line: underline;
  text-decoration-color: cyan;
}

s {
  text-decoration-line: line-through;
  text-decoration-color: red;
  text-decoration-style: wavy;
}

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

Спецификация
CSS Текстовый модуль декораций уровня 3 # text-decoration-color-property

Совместимость с браузерами

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`text-decoration-color`	57	79	366–39	44	12.18	57	366–39	43	12.28	7.0	57

См. также

При одновременном задании нескольких свойств декорации линии может быть удобнее использовать сокращённое свойство text-decoration вместо этого.
Тип данных <color>
Другие свойства, связанные с цветом: background-color, border-color, outline-color, text-emphasis-color, text-shadow, caret-color и column-rule-color

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color