Inherited Text-Decoration Style

Inherited Text-Decoration style

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>

Why css text-decoration inheritance does not work for inline-block?

You can find the following sentences on the CSS specification:

Underlines, overlines, and line-throughs are applied only to text (including white space, letter spacing, and word spacing): margins, borders, and padding are skipped. User agents must not render these text decorations on content that is not text. For example, images and inline blocks must not be underlined.

http://www.w3.org/TR/CSS2/text.html#lining-striking-props

What is the reason for the lack of inheritance of text-decoration?

Consider this mark-up, which pre-dates CSS.

<strike>The <a href="http://example.com/">example</a> is here.</strike>

<strike> is by default text-decoration:line-through while <a href="..."> is by default text-decoration:underline. Pre-CSS, the word "example" would be both underlined and struck out, so CSS needed to be able to implement the same effect. To do this, the spec writers chose to make text-decoration accumulate rather than inherit.

The alternative would have been to give each text-decoration value its own property. The father of CSS, Håkon Wium Lie, addresses this in a message to the www-style mailing list in May 1997:

There is no easy way to turn off blinking without also
throwing out other values set on the text-decoration property. This
was sacrificed for the sake of brevity -- the alternatives would be to
have separate binary properties for all values on 'text-decoration'.

At the time it was envisaged that text-decoration would be extended to have more than the four decorations it eventually had - several had already been dropped from the draft spec.

So there you have it, the designers of CSS did not want a proliferation of properties at that time.

---

It's difficult to prove such a negative, but I'm not aware of any other properties that propagate in this way.

CSS: Could not override inherited text-decoration property

After a quick play with some CSS, a workaround (which is horrid, but does work) would be to do the following in your CSS:

.menu span {text-decoration:underline;}

... in place of the first line of your sample CSS.
Then in the HTML do the following:

<span class="menu">
    <span>Some underlined text came here...</span>
    <a href="...">this text should not be underlined until mouse on!</a>
    <span>Some more underlined text came here...</span>
</span>

It's far from being perfect, but is the best I can come up with for the moment.

How do I get this CSS text-decoration override to work?

text-decoration does not behave the same as other font/text related styling like font-weight. Applying text-decoration will affect all nested elements as well.

Check this out:
http://www.w3.org/TR/CSS21/text.html#propdef-text-decoration

Excerpt:

Text decorations on inline boxes are
drawn across the entire element, going
across any descendant elements without
paying any attention to their
presence. The 'text-decoration'
property on descendant elements cannot
have any effect on the decoration of
the element

. . . .

Some user agents
have implemented text-decoration by
propagating the decoration to the
descendant elements as opposed to
simply drawing the decoration through
the elements as described above. This
was arguably allowed by the looser
wording in CSS2.

I've got the info from: http://csscreator.com/node/14951

getComputedStyle text-decoration inherit

text-decoration isn't supposed to inherit, even though the parent text decoration affects the child text. This is unlike font-size, which does inherit.

That being said, this definitely looks like an IE bug. While window.getComputedStyle() is reporting in IE10 as inherited, it's interesting to note that the F12 developer tools say otherwise.

References:

https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration

http://reference.sitepoint.com/css/text-decoration

CSS - overriding an inherited text-decoration:line-through

Try these http://jsfiddle.net/Y7ZVp/4/

its working fine.

else you can add your text on

tag and give line-through on .strike p

you can try any on them

CSS text-decoration property cannot be overridden by child element

From the text-decoration spec:

The 'text-decoration' property on descendant elements cannot have any effect on the decoration of the ancestor.

The answer in the linked question further quotes (I can't find this text in the spec anymore however):

Text decorations on inline boxes are drawn across the entire element, going across any descendant elements without paying any attention to their presence.

And another quote, CSS3 seems to introduce text-decoration-skip, intended to address this by applying the property on the descendant (in your case, <span>):

This property specifies what parts of the element's content any text decoration affecting the element must skip over. It controls all text decoration lines drawn by the element and also any text decoration lines drawn by its ancestors.

text-decoration: none and the chrome inspector display

You could add display:inline-block to that product-price element.
It's about the text-decoration propagation from parent to child.

Text-decorations are not propagated to inline-block elements. So you don't even have to add text-decoration: none

.product-price {

  display:inline-block;

}

<a href="#">

<span class='product-price'>no underline</span>

Link Text

</a>

---

Related Topics