CSS text-decoration underline color

You can do it if you wrap your text into a span like:

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

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

(for fellow googlers, copied from duplicate question) This answer is outdated since text-decoration-color is now supported by most modern browsers.

You can do this via the following CSS rule as an example:

text-decoration-color:green

If this rule isn't supported by an older browser, you can use the following solution:

Setting your word with a border-bottom:

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