Question

I have my span tag:

<span style="text-decoration:line-through" > Hello World <a href="http://www.yahoo.com">Yahoo</a> </span>

As you can see I have applied line-through on span. But this results in line-through on anchor tag too. How do I prevent line-through on anchor tag. I don’t want strike on my anchor tag.

Note: Please don’t ask me to move my anchor tag outside of span tag! If I could do that I wouldn’t be asking this question.

Answer 1

[From CSS text-decoration property cannot be overridden by child element ]

text-decoration specs state:

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

text-decoration-skip, as mentioned in the linked question is supported by neither the latest version of Chrome, nor Firefox

---

I don’t know if this is acceptable to you, but since the solution below doesn’t work, this might be your only way to do it:

<span>
   <span class="strikethrough">Hello </span>
   <a href="#">World!</a>
</span>​

.strikethrough {
   text-decoration: line-through;
}

It is valid to nest span elements. Are nested span tags OK in XHTML?

---

Doesn’t work:

The property will be inherited by the child by default. If you do not want that, override it.

span > a {
   text-decoration: none;
   /* or perhaps 
   text-decoration: underline;
   */
}

This will ensure all anchor elements that appear as a direct descendent of a span element will not have a strikethrough.