Текст-украшение-цвет - CSS-хитрости

Anonim

text-decoration-colorСвойство устанавливает цвет подчеркивания, Оверлайн или линейные через по тексту с text-decorationприкладной собственностью. Он также может установить цвет подчеркивания ссылок.

a ( text-decoration-color: #E18728; )

Значения

text-decoration-colorможет inheritили принимать любое значение цвета CSS, включая именованные цвета, цвета HEX, RGBa и HSLa.

Стенография

В браузерах, которые поддерживают text-decoration-styleи text-decoration-colorвы можете добавить цвет к text-decorationсокращенному свойству:

.underlined ( text-decoration: underline dotted red; )

В настоящее время только Firefox поддерживает это без префикса. Safari поддерживает его с -webkitпрефиксом. Chrome также нуждается в -webkitпрефиксе и функциях экспериментальной веб-платформы, включенных в флагах Chrome.

Демо

В text-decoration-colorэтой демонстрации работает в текущих версиях Firefox и Safari. Он также будет работать в Chrome с включенным флагом «экспериментальные функции веб-платформы».

См. Pen text-decoration-color от CSS-Tricks (@ css-tricks) на CodePen.

Связанный

  • text-decoration
  • text-decoration-line
  • text-decoration-style
  • text-decoration-skip

Дополнительная информация

  • text-decoration-color в модуле оформления текста CSS уровня 3 CR
  • text-decoration-color в MDN

Поддержка браузера

Хром Сафари Fire Fox Опера IE Android iOS
31 † 7.1 * 6.0 ‡ Никто Никто Никто 8 *

† с включенными «экспериментальными функциями веб-платформы» в chrome: // flags. Chrome 31 необходим префикс -webkit-. Мы протестировали Chrome 50, и он работал только без префикса.
‡ 6+ с префиксом -moz, без префикса с 36.