Свойство CSS text-decoration-color
Используйте свойство CSS text-decoration-color для задания цвета оформления текста. Значения свойства и примеры.
CSS-свойство text-decoration-color задаёт цвет линий, которыми оформляется текст — подчёркивания, надчёркивания и зачёркивания. По умолчанию линия оформления принимает тот же цвет, что и сам текст, поэтому это свойство используют тогда, когда нужно, чтобы линия выделялась другим цветом по сравнению со словами.
На этой странице рассматриваются синтаксис, допустимые значения, взаимодействие свойства с сокращённым свойством text-decoration и запускаемые примеры.
Зачем нужно отдельное свойство для цвета?
Без text-decoration-color подчёркивание всегда совпадает по цвету с текстом. В большинстве случаев это подходит, однако дизайнеры нередко хотят получить более тонкую или насыщенную линию — серое подчёркивание под чёрным текстом, красное зачёркивание над указанной ценой или цветное подчёркивание, сигнализирующее о состоянии ссылки. Вынесение цвета в отдельное полное свойство делает такие эффекты возможными, не затрагивая цвет самого текста.
Это одно из трёх полных свойств, составляющих сокращённое свойство text-decoration, наряду с text-decoration-line (тип линии: underline, overline, line-through) и text-decoration-style (solid, wavy, dotted, dashed, double). Само по себе свойство text-decoration-color не имеет визуального эффекта, если не задана линия оформления.
Данное свойство входит в число свойств CSS3. Можно использовать любой допустимый цвет CSS — полный список см. в разделе HTML colors.
| Начальное значение | currentColor |
|---|---|
| Применяется к | Всем элементам. Также применяется к ::first-letter и ::first-line. |
| Наследуется | Нет. |
| Анимируемость | Да. Цвет поддаётся анимации. |
| Версия | CSS Text Decoration Module Level 3 |
| DOM Syntax | object.style.textDecorationColor = "#ccc"; |
Синтаксис
Синтаксис CSS text-decoration-color
text-decoration-color: color | initial | inherit;Где color — любое допустимое значение цвета CSS. По умолчанию используется currentColor, то есть линия оформления совпадает с цветом текста элемента.
Примечание: использование сокращённого свойства text-decoration сбрасывает text-decoration-color к начальному значению (currentColor), если в сокращении не указан цвет. Поэтому, если вы задаёте цвет отдельно, объявляйте его после сокращённого свойства text-decoration либо включайте цвет непосредственно в сокращение.
Пример использования свойства text-decoration-color:
Пример кода CSS text-decoration-color
<!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>Результат
Пример свойства text-decoration-color со значениями «underline» и «line-through»:
Пример CSS text-decoration-color со всеми значениями
<!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>Использование currentColor
Начальное значение currentColor синхронизирует линию оформления с цветом текста. Это удобно, когда цвет текста меняется при :hover или в разных темах — подчёркивание автоматически следует за ним без написания дополнительного правила:
a {
color: #8ebf42;
text-decoration-line: underline;
text-decoration-color: currentColor; /* line matches the link color */
}
a:hover {
color: #c91010; /* both text and underline turn red */
}На что обратить внимание
- Нет линии — нет цвета.
text-decoration-colorотображается только при наличии линии оформления. Сочетайте его сtext-decoration-line(или сокращённым свойствомtext-decoration) — иначе ничего не будет видно. - Важен порядок объявлений. Последующее сокращённое свойство
text-decorationсбросит цвет обратно доcurrentColor. Задавайте цвет последним или включайте его в сокращение:text-decoration: underline #8ebf42;. - Свойство не наследуется. Каждый элемент вычисляет собственное значение, однако поскольку по умолчанию используется
currentColor, дочерний элемент, как правило, всё равно совпадает с унаследованным цветом текста. - Свойство анимируемо. Поскольку переходы цвета плавные, можно анимировать цвет подчёркивания при наведении с помощью
transition.
Чтобы управлять толщиной линии, см. text-decoration-style и полное сокращённое свойство text-decoration.
Значения
| Значение | Описание | Пример |
|---|---|---|
| color | Задаёт цвет оформления текста. Можно использовать названия цветов, шестнадцатеричные коды, rgb(), rgba(), hsl(), hsla() и currentColor. | Play it » |
| initial | Устанавливает свойство в значение по умолчанию. | Play it » |
| inherit | Наследует значение свойства от родительского элемента. |