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.

score 6 · Answer 1 · answered Aug 11 '09 at 17:57

6

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.

answered Aug 11 '09 at 17:57

John Calsbeek

35,947
7
94
101

Ugh. That's what I was afraid of. Thanks for the answer and the link, that explained it well! – JPero Aug 11 '09 at 18:05
Actually, under a specific set of circumstances it *is* possible! I Added a more complete description in my answer below :-) – Potherca Jan 15 '11 at 20:21

score 6 · Answer 2 · answered Mar 28 '16 at 10:22

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;

score 5 · Accepted Answer · edited Apr 19 '16 at 14:53

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>

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. — bleistift2, Feb 16 '20 at 12:40
@bleistift2 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 http://result.dabblet.com/gist/3713284/. I'll update my answer later this day/week when I have time. — Potherca, Feb 18 '20 at 13:16

score 2 · Answer 4 · answered Jun 21 '18 at 16:26

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>

Inherited Text-Decoration style

4 Answers4

Linked