3

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.

Tim Tom
  • 2,152
  • 6
  • 27
  • 39

1 Answers1

2

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

Community
  • 1
  • 1
Ayush
  • 41,754
  • 51
  • 164
  • 239
  • @ascii-lime: Indeed, hence the CSS comment. – Ayush Jun 14 '12 at 02:27
  • @dunsmoreb: Oh, wow. It doesn't. Apparently the underline gets applied **in addition to** the strikethrough. I'm looking into other ways. – Ayush Jun 14 '12 at 02:30
  • @xbonez: Sorry not acceptable. You have effectively done the same thing which I mentioned not to in my **Note** in question. – Tim Tom Jun 14 '12 at 02:39
  • @TimTom: Fair enough. Hopefully someone comes along who can show a better way of achieving this. – Ayush Jun 14 '12 at 02:41