How to Remove CSS line-through

Question

I am trying to remove the text-decoration:line-through; style applied to my element and I cannot seem to be able to do so. I have 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 the underline style.

I know I can always re-write my HTML so the elements that require a line-through has their own class. I'm wondering if there is an alternative other 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 I can always re-write my HTML so the elements that require a line-through has their own class. I'm wondering if there is an alternative other then restructuring my HTML.

Not really. The behavior you see is totally by design; ancestors will always propagate their text decorations to certain descendants, and conversely you can't affect an ancestor's text decoration from within a descendant.

There isn't a very viable alternative to restructuring, currently, although text-decoration-skip from the upcoming CSS3 text decoration module looks promising.