How to remove CSS line

Question

I am trying to remove the text-decoration:line-through; style text-decoration:line-through; applied to my element, and I seem to be unable to do this. I tried text-decoration:none; but it does not work.

When I apply text-decoration:underline; to span , it seems that instead of replacing the line-through style, the browser adds an underline style.

I know that I can always rewrite my HTML, so for elements that require line-through , they have their own class. I am wondering if there is another alternative and then restructuring my HTML.

http://jsfiddle.net/wshHW/

 <style> p { text-decoration:line-through; } span { text-decoration:none; } </style> <p>Foo <span>bar</span></p> 

Answer 1

I know that I can always rewrite my HTML code, so for elements that require line-through , they have their own class. I am wondering if there is another alternative and then restructuring my HTML.

Not really. The behavior you see is completely in design ; ancestors will always distribute their text decorations to certain descendants, and, conversely, you cannot influence the decor of ancestor text from within the descendant.

There is currently a not-so-viable alternative to restructuring, although text-decoration-skip from the future CSS3 text layout module looks promising.