Как сделать подчеркивание в css другим цветом?

Question

[luiscipher]

Возможно ли сделать подчеркивание текста в css цветом отличным от цвета текста?
Чтобы получилось вот так:

Comments

[sajtim]

Радуемся здесь, или просто гуглим text-decoration-color, а также text-decoration-offset и text-decoration-thickness.

Answer 1

[ElijahTr]

Если нужно соответствие макету (непрерывная линия) - использовать border-bottom.
Если нужно просто подчеркивание текста - использовать text-decoration: underline.
Но в последнем случае иметь в виду что некоторые браузеры используют text-decoration-skip: ink по умолчанию - линия будет прерываться для элементов выходящих за базовую линию. (Например под буквами "p" на верхней строке).

Answer 2

[ismuhanovv]

Здесь скорей всего используется < hr > со стилями, а так вот
p {
text-decoration: underline;
text-decoration-color: red;
}

Answer 3

[lexnekr]

border-bottom: solid 5px #74b988;
Только цвет свой и толщину поставьте.

htmlbook.ru/css/border-bottom

Comments

[lexnekr]

Кстати, странно, но подчёркивание на разном расстоянии от шрифта.
На 2 строке заметно ниже.
Это фича или бага? В смысле надо ли это воспроизвести?

Answer 4

[kissmyairs]

text-decoration: underline;
text-decoration-color: aquamarine;

Answer 5

[Stimulate]

https://jsfiddle.net/bgcecvwy/