Цвет текста подчеркивания CSS

Ответ 1

(для коллег по Google, скопировано с дублирующего вопроса) Этот ответ устарел, поскольку text-ornament-color теперь поддерживается большинством современных браузеров.

Скорее всего, вам это нужно, поставив слово на границе.

a:link {
  color: red;
  text-decoration: none;
  border-bottom: 1px solid blue;
}
a:hover {
 border-bottom-color: green;
}

Ответ 2

Вы можете сделать это, если заключите текст в строку, например:

a {
  color: red;
  text-decoration: underline;
}
span {
  color: blue;
  text-decoration: none;
}

<a href="#">
  <span>Text</span>
</a>

Ответ 3

Насколько я знаю, это невозможно... но вы можете попробовать что-то вроде этого:

.underline 
{
    color: blue;
    border-bottom: 1px solid red;
}

<div>
    <span class="underline">hello world</span>
</div>

Ответ 4

Вы не можете изменить цвет линии (вы не можете указать разные цвета переднего плана для одного и того же элемента, а текст и его оформление образуют один элемент). Однако есть некоторые трюки:

a:link, a:visited {text-decoration: none; color: red; border-bottom: 1px solid #006699; }
a:hover, a:active {text-decoration: none; color: red; border-bottom: 1px solid #1177FF; }

Также вы можете сделать некоторые интересные эффекты следующим образом:

a:link {text-decoration: none; color: red; border-bottom: 1px dashed #006699; }

Надеюсь, что это поможет.