改变IE中的下划线颜色

Question

I have text editor which user can play around. In that I have an IE underline color issue. Below code

test <font color="#4ab948"><u>paragraph</u></font>

will applied color for text and underline. If user choose underline first then color, the code generated as below which will not apply color for underline :(

test <u><font color="#4ab948">paragraph</font></u>

Any luck ?

Answer 1

font has been deprecated for a while now. Instead you should use span with the style attributes applied to the span . For example:

 <span style='color:#4ab948;text-decoration:underline;'>paragraph</span> 

Answer 2

If you want absolute control of the text-decoration property on the u element...override it with a pseudo-element.

 u { text-decoration: none; position: relative; color: red; } u:after { content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 1px; background: green; margin-top: -2px; } 

 <u>paragraph</u> 

Answer 3

You can come up with two approaches

Using border-bottom as

span {
color: red;
text-decoration: none;
border-bottom: 1px solid green;
}

OR

using a-span Approach as

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