• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Меняем цвет подчеркивания ссылки на CSS (Как изменить цвет подчеркивания ссылки с помощью CSS)
Меняем цвет подчеркивания ссылки на CSS
Kosten
Вторник, 07 Января 2020 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
По умолчанию цвет подчеркивания в ссылке такой же, как и цвет текста. Однако с недавно введенным 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.
Прикрепления: 1325550.jpg (38.4 Kb)
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Меняем цвет подчеркивания ссылки на CSS (Как изменить цвет подчеркивания ссылки с помощью CSS)
  • Страница 1 из 1
  • 1
Поиск: