Inherited Text-Decoration style

text-decoration-line
text-decoration-color
text-decoration: none
text-decoration underline thickness
text-decoration-skip
text-decoration: none html
text-decoration none not working
mdn text-decoration

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>

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>

Inherited Text-Decoration style, By default, the line or lines inherit the color of the text as set by its color text-​decoration can be used in combination with text-decoration-style  The text-decoration-style property sets the style of the text decoration (like solid, wavy, dotted, dashed, double). Tip: Also look at the text-decoration property, which is a short-hand property for text-decoration-line, text-decoration-style, and text-decoration-color.

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>

text-decoration-style, The text decorations are not technically inherited, but the effect is similar to inheritance. If they're set on an inline element, they apply to all  text-decoration-line: Sets the kind of text decoration to use (like underline, overline, line-through) text-decoration-color: Sets the color of the text decoration: text-decoration-style: Sets the style of the text decoration (like solid, wavy, dotted, dashed, double) initial: Sets this property to its default value. Read about initial: inherit

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.

text-decoration, This CSS tutorial explains how to use the CSS property called text-decoration with syntax and examples. The CSS text-decoration property defines the text formatting of an element such as underline, overline, line-through and List Style Properties inherit, Element will inherit the text-decoration from its parent element The text-decoration-style property in CSS is used to set the text-decoration of an element. The text-decoration property is the combination of text-decoration-line, text-decoration-style and text-decoration-color property.

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>

text-decoration, Syntax: text-decoration: text-decoration-line text-decoration-style text-decoration-​color|initial|inherit;. Property values: text-decoration-line: Specifies the kind of  Also, Firebug suggests that according to the Firefox DOM, the link has "text-decoration: none", which isn't the case visually. – icabod Jan 21 '10 at 17:37 icabod, yeah, it looks so But it shows a particular (very) big problem of browser incompatibility

CSS text-decoration property, text-decoration. I'm not saying its wrong but I really cant get my head around to why this is - is this a case exception? [snip] Sort of. Text decoration applies to the whole element including its children - so the value isn't inherited (and therefore cannot be overridden) - but still has effect. The CSS 2 specification isn't very clear on this:

CSS text-decoration-style property, The text-decoration-style CSS property sets the style of the lines specified by text-decoration-line. The style applies to all lines that are set with text-decoration-line. I'd far rather be happy than right any day. The source for this interactive example is stored in a GitHub repository.

text-decoration · WebPlatform Docs, .text { font-style: italic; text-decoration: underline; color: navy; } #content .module .text { color: red; } This will only target the text inside the content div and increase our specificity value to 0.0.1.2.0. Option 2: We can introduce a “text-red” modifier class to the second <p> element. HTML

Comments
  • Ugh. That's what I was afraid of. Thanks for the answer and the link, that explained it well!
  • Actually, under a specific set of circumstances it is possible! I Added a more complete description in my answer below :-)