css властивість text-decoration-color

Встановлює колір оздоблення тексту, котрий додається через властивість text-decoration.

CSS властивість text-decoration-color працює тільки на елементах з видимим text-decoration.

Якщо не використовувати text-decoration-color, будь-яке підкреслення, як правило, відображатиметься в тому ж кольорі, що й підкреслений текст. Те саме стосується і перекресленого тексту та тексту з лінією над ним. text-decoration-color дозволяє вказати інший колір для тексту та його оздоблення.

правити

Порада

При одночасному налаштуванні декількох властивостей оздоблення рядка, можливо, буде зручніше скористатися властивістю text-decoration.

автор: Svitlana правити

Нотатка

Safari підтримує властивість -webkit-text-decoration-color.

автор: Svitlana правити

Нотатка

Firefox до версії 36 підтримує властивість -moz-text-decoration-color.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

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

Властивість text-decoration-color може отримувати 3 значень:

color

Колір оздоблення тексту.

автор: Svitlana

правити

initial

Встановлюється без задання.

автор: Svitlana

правити

inherit

Успадковує це значення від свого батьківського елемента.

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
text-decoration-color	57.0	36.0 <br> 6.0 -moz-	7.1 -webkit-	44.0	Не підтримується	Не підтримується

Підтримка: мобільні переглядачі

Переглядач
text-decoration-color	Не підтримується	36.0 <br> 6.0 -moz-	8.0 -webkit-

Приклади

+ запропонувати свій приклад у пісочниці

<p>Підкреслений абзац із червоною лінією.</p>

p {
    text-decoration: underline;
    text-decoration-color: red;
}

<p><a href="#">Посилання з червоним підкресленням</a></p>

a {
    text-decoration-color: red;
}