text-decoration-color

Свойство text-decoration-color определяет цвет декоративной линии (подчёркивания, зачёркивания и других), заданной при помощи text-decoration-line.

Кстати, декоративные линии можно интересно стилизовать при помощи text-decoration-style 😎

Зададим для слов, обозначающих цвет в тексте, двойное нижнее подчёркивание, и разукрасим линии в нужные цвета:

        
          
          span {  text-decoration-line: underline;  text-decoration-style: double;}.red {  text-decoration-color: red;}.yellow {  text-decoration-color: yellow;}.white {  text-decoration-color: white;}
          span {
  text-decoration-line: underline;
  text-decoration-style: double;
}

.red {
  text-decoration-color: red;
}

.yellow {
  text-decoration-color: yellow;
}

.white {
  text-decoration-color: white;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Значение text-decoration-color по умолчанию — currentColor, то есть цвет такой же, что и у текста.

        
          
          body {  color: #735184;}span {  text-decoration-line: underline;  text-decoration-style: double;}
          body {
  color: #735184;
}

span {
  text-decoration-line: underline;
  text-decoration-style: double;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В примере выше цвет двойного подчёркивания серобуромалиновый, поскольку для самого текста задан этот цвет, а значит и currentColor для text-decoration-color будет значиться серобуромалиновым.

Это можно легко поменять: text-decoration-color принимает цвет в любом доступном формате, например, жёлтый yellow или фиолетовый #8b00ff.

Раскрасить можно не только text-decoration-line, но и линии, обозначенные в HTML-разметке тегами, например <u> или <del>. У text-decoration-color краски хватит на всех!

        
          
          del {  text-decoration-color: orange;}
          del {
  text-decoration-color: orange;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать