Inheriting multiple text-decorations on a single element [duplicate]

Question

This question already has answers here:

CSS text-decoration property cannot be overridden by child element [duplicate] (2 answers)

CSS multiple text-decoration (2 answers)

Closed 8 years ago.

I experience the same strange issue with every major browser: an element gets styled with two text-decoration properties.

The first decoration comes from the parent element, the second one – from the element itself. Here's the relevant HTML:

<div style="text-decoration: underline">
    <span style="text-decoration: line-through">Hello</span>
</div>

How to override the first declaration, not add to it?

Answer 1

What you're seeing is that the text decoration on the parent gets applied to the text in the child element, because the text in the child is also considered part of the text in the parent. See the spec for details.

There is currently no way to cancel out the parent text decoration on the child while keeping the text flow. You could float or absolutely position the child element, or make it an inline block, but that alters the layout. If that isn't desirable, you'll have to find a way to move the parent text-decoration style to, say, a sibling of the child element within the parent. If there is bare text within the parent element, that means you need to wrap that in a sibling. So for example if you had this extra text:

<div style="text-decoration: underline">
    <span style="text-decoration: line-through">Hello</span>
    world
</div>

You'd need to wrap it, and move the declaration accordingly:

<div>
    <span style="text-decoration: line-through">Hello</span>
    <span style="text-decoration: underline">world</span>
</div>