Inherited Text-Decoration style

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.

Eventful

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>

Loney

Unfortunately these workarounds appear to have stopped working. In Chromium 80, no text decoration gets negated by these solutions. In Firefox 72, only display: table-caption remains standing. – Filiation

@Filiation Currently the display: inline-block in a span or a div or display: inline-table in a span or a div seems to work in most browsers. I've set up a more detailed test at result.dabblet.com/gist/3713284. I'll update my answer later this day/week when I have time. – Loney

Answer 2

I just found, that if you set position: absolute for block, it will work both in chrome and FF:

<span style="text-decoration:line-through;">
Dead Text 
<a href="#" style="text-decoration:underline;color:Red;">This not works</a>
</span>
<br/>
<span style="text-decoration:line-through;">
Dead Text 
<a href="#" style="position: absolute;margin-left: 5px;text-decoration:underline;color:Red;">This works</a>
</span>

Ugly, but can help in some cases;

Idocrase

Answer 3

I don't believe it's possible. From SitePoint:

Also, text decorations on inline boxes are rendered along the entire box, even if it contains descendant boxes. This, too, may appear similar to inheritance. Any text decoration setting on a descendant box can never “undo” the text decorations of an ancestor box.

Gloaming

Ugh. That's what I was afraid of. Thanks for the answer and the link, that explained it well! – Eventful

Actually, under a specific set of circumstances it is possible! I Added a more complete description in my answer below :-) – Loney

Answer 4

This works as well: display: inline-block

<span style="text-decoration:line-through;">
Dead Text 
<a href="#" style="text-decoration:underline;color:Red;">This not works</a>
</span>
<br/>
<span style="text-decoration:line-through;">
Dead Text 
<a href="#" style="text-decoration:underline;color:blue;display:inline-block">This works</a>
</span>

Zelaya