Changing Underline color

There’s now a new css3 property for this: text-decoration-color

So you can now have text in one color and a text-decoration underline – in a different color… without needing an extra ‘wrap’ element

p {
  text-decoration: underline;
  -webkit-text-decoration-color: red; /* safari still uses vendor prefix */
  text-decoration-color: red;
}

<p>black text with red underline in one element - no wrapper elements here!</p>

Codepen

NB:

1) Browser Support is limited at the moment to Firefox and Chrome (fully supported as of V57) and Safari

2) You could also use the text-decoration shorthand property which looks like this:

<text-decoration-line> || <text-decoration-style> || <text-decoration-color>

…so using the text-decoration shorthand – the example above would simply be:

p {
  text-decoration: underline red;
}

p {
  text-decoration: underline red;
}

<p>black text with red underline in one element - no wrapper elements here!</p>