html - Changing Underline color

Question

I have this code here:

echo "<u><font color='red'><br>$username</font></u>";

Firstly, as you can see, it's underlined (< u >). Second, all text is all red. Well is there anyway to leave the text ($username) red but the underline black?

Answer 1

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>