Inherited Text Style

Question

How can I hide or remove the text style for parents? For example, in the following text and anchor there is textual design of the end-to-end path, is there a way not to apply this 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 inner text in a range is not an easy option with what I have, so I'm looking for a solution based on CSS styles, if possible.

Answer 1

I do not think that's possible. From SitePoint :

In addition, text decorations on embedded boxes are displayed along the entire box, even if it contains descendant boxes. This may also seem like inheritance. Any text decoration installation in a flow box can never “cancel” the text decorations of the ancestor.

Answer 2

Wrong line in accepted answer:

Any setting of the design of the text to the Block of descendants can never "cancel" the text decorations of the ancestor window.

Never say never, right?

I have not yet found a solution for IE (unless you are working with a script in which the strikethrough style is set to <TD> ), however this is possible for other browsers, although you will have to fight with the side effects of the solution.

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

In short: just add display:table; in child style. For some reason in FF you can use any of table , block , list-item or table-caption , but they do not work in Safari / Chrome.

It uses the following code:

 <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> 

Answer 3

I just found that if you set the position: absolute for a block, it will work in both 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> 

Awful, but may help in some cases;