在CSS中用红色下划线

Question

I want to write an underline with font color red.

I Tried like this

 <u> <li style="COLOR:red"><a href="/jobs.aspx/"> Internal Job Openings </a></li></u>

But the content is hiding. How to fix this?

Answer 1

You need to override the default style for a as well:

<ul>
    <li style="color:red"><a style="color:red" href="#">foo</a></li>
</ul>

see the fiddle....

Answer 2

First of all, your HTML is invalid. You cannot enclose a <li> inside a <u> tag. And remove the <u> tag as it is deprecated. Use the CSS's color and text-decoration rules to achieve your result.

Change it to this way:

<li style="COLOR:red; text-decoration: underline;">
    <a href="/jobs.aspx/"> Internal Job Openings </a>
</li>

If you just need it for the link, then give the style to the link.

<li style="COLOR:red;">
    <a style="text-decoration: underline;" href="/jobs.aspx/"> Internal Job Openings </a>
</li>