Question

How would I negate or remove a parents text-decoration style? For example in the following, both the text and the anchor have a text-decoration of line-through, is there a way to not have that applied to the anchor tag?

<span style="text-decoration:line-through;">
    Dead Text 
    <a href="#" style="text-decoration:underline;color:Red;">Not Dead Text</a>
</span>

NOTE: wrapping the inner text in a span isn’t an easy option with what I have so I’m looking for a solution based on the css styles if possible.

Answer 1

The following line in the accepted answer is incorrect:

Any text decoration setting on a
descendant box can never “undo” the
text decorations of an ancestor box.

Never say never, right?

I have not found a solution for IE yet (unless you happen to be working with a scenario where the strikethrough is set on a <TD>) however it is possible for other browsers, although you will have to battle the side-effects of the solution.

See for yourself at http://result.dabblet.com/gist/3713284/

In short: just add display:table; to the child’s style. For some reason in FF you can use any of table, block, list-item or table-caption but these don’t work in Safari/Chrome.

It uses the code below:

<span style="text-decoration:line-through;">
   Dead Text
   <a href="#" style="text-decoration:underline;color:Red;">Undesired strikethrough</a>
</span>

<div style="text-decoration:line-through;">
  Dead Text
  <a href="#" style="text-decoration:underline;color:Red; display: table;">display: table in a div</a>
</div>

<span style="text-decoration:line-through;">
  Dead Text
  <a href="#" style="text-decoration:underline;color:Red; display:  table;">display: table in a span</a>
</span>

<span style="text-decoration:line-through; display: block;">
  Dead Text
  <a href="#" style="text-decoration:underline;color:Red; display: table;">display: table in a span with "display:block;"</a>
</span>

<span style="text-decoration:line-through; display: table-cell;">
  Dead Text
  <a href="#" style="text-decoration:underline;color:Red; display: table;">display: table in a span with "display:table-cell;"</a>
</span>

<span style="text-decoration:line-through;">
  Dead Text
  <a href="#" style="text-decoration:underline;color:Red; display: list-item;">display: list-item</a>
</span>

<span style="text-decoration:line-through;">
  Dead Text
  <a href="#" style="text-decoration:underline;color:Red; display: table-caption;">display: table-caption;</a>
</span>