По умолчанию цвет подчеркивания в ссылке такой же, как и цвет текста. Однако с недавно введенным CSS-свойством text-ornament-color подчеркивание и текст могут иметь разные цвета.
Подчеркивание является одним из распространенных методов стилевого оформления, применяемых к ссылкам. По умолчанию цвет подчеркивания устанавливается таким же, как и цвет текста ссылки.
Но иногда мы хотели бы придать подчеркиванию другой цвет, отличный от цвета текста ссылки. Для этого мы в основном использовали CSS-свойство border-bottom, чтобы оно выглядело как подчеркивание.
Однако есть новый и прямой способ сделать это без использования взлома границы.
Код
#link {
text-docoration: none;
color: blue;
}
/* show underline on hover */
#link:hover {
text-decoration: underline;
text-decoration-color: red;
-webkit-text-decoration-color: red;
}
Совместимость браузера
Все последние браузеры поддерживают text-decoration-color. Однако в Safari он в настоящее время имеет префикс -webkit-text-decoration-color.
Подчеркивание:
Помимо изменения цвета текста подчеркивания, несколько новых CSS-свойств были введены для стиля подчеркивания.
text-decoration-thickness может изменить толщину подчеркивания.
text-decoration-style может подчеркивать пунктир, пунктир, волнистость или двойное подчеркивание.
text-decoration-offset может установить смещение для подчеркивания.
text-decoration-skip-ink может даже установить подчеркивание для прохождения всех символов, где по умолчанию некоторые длинные символы пропускаются при подчеркивании.
Новые свойства CSS для стилизации текстовых украшений и подчеркиваний содержат короткое видео об этом недавно введенном текстовом оформлении CSS.
