CSS text-decoration-color — колір підкреслення
Встановлює колір оздоблення тексту, котрий додається через властивість text-decoration.
CSS властивість text-decoration-color працює тільки на елементах з видимим text-decoration.
Якщо не використовувати text-decoration-color, будь-яке підкреслення, як правило, відображатиметься в тому ж кольорі, що й підкреслений текст. Те саме стосується і перекресленого тексту та тексту з лінією над ним. text-decoration-color дозволяє вказати інший колір для тексту та його оздоблення.
Загальний опис
автор: NagarD
- Порада
-
При одночасному налаштуванні декількох властивостей оздоблення рядка, можливо, буде зручніше скористатися властивістю
автор: Svitlanatext-decoration. - Нотатка
-
Safari підтримує властивість
автор: Svitlana-webkit-text-decoration-color. - Нотатка
-
Firefox до версії 36 підтримує властивість -
автор: Svitlanamoz-text-decoration-color.
Синтаксис
text-decoration-color: color|initial|inherit;Властивість text-decoration-color може отримувати 3 значень:
-
color -
Колір оздоблення тексту.
автор: Svitlana -
initial -
Встановлюється без задання.
автор: Svitlana -
inherit -
Успадковує це значення від свого батьківського елемента.
автор: Svitlana
| Значення без задання: | Співпадає з кольором тексту |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.textDecorationColor="red" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 57 | 36 | 12.1 | 44 | 79 | — |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 57 | 57 | 36 | 12.2 |
Приклади
+ запропонувати свій приклад у пісочниці
Абзац підкреслено, і колір задано саме лінії: текст лишається чорним, лінія — червона.
HTML
<p>Підкреслений абзац із червоною лінією.</p>CSS
p {
text-decoration: underline;
text-decoration-color: red;
}Лінія підкреслення посилання — червона, а колір самого тексту не змінюється.
HTML
<p><a href="#">Посилання з червоним підкресленням</a></p>CSS
a {
text-decoration-color: red;
}Перше посилання підкреслене типово — лінія в колір тексту. Друге має приглушене підкреслення з власним кольором, товщиною й відступом. Третє показує пастку: text-decoration-color на вкладеному span не діє, бо лінію оголосило саме посилання.
HTML
<p><a class="d1" href="#">Звичайне підкреслення</a></p>
<p><a class="d2" href="#">Приглушене підкреслення власного кольору</a></p>
<p><a class="d3" href="#">Тут <span>ця частина</span> лишається того ж кольору</a></p>CSS
body {
font-family: sans-serif;
font-size: 20px;
padding: 12px;
}
p {
margin: 0 0 18px;
}
a {
color: #1f3a63;
}
.d2 {
text-decoration-color: rgb(31 58 99 / 0.35);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
.d3 span {
text-decoration-color: crimson;
}Приклад використання
HTML
<p>This is <strong>text</strong>!</p>CSS
p {
text-decoration: underline;
font-size: 40px;
color: #444;
text-decoration-color: red;
}Коментарі
Коментарів ще немає — будьте першим!