text-decoration:none question

[WithAn.Es]

So I have a simple idea and am surprised it doesn’t work, but maybe I’m doing it wrong. I have a work around, but seems to me like it should work.

Basically I have an li with a class of removed. I apply a text-decoration: line-through to that element. The li has a em as well and that I’d like to not have a line through so I set it to text-decoration: none.

.removed {
  list-style-type: square;
  text-decoration: line-through;
  color: red;
}
em {
  text-decoration: none;
  color: #999;
}

<li class="removed">Item <em>(other info)</em></li>

Example: http://codepen.io/anon/pen/icuwC

[noahgelman]

Here you go broski. The secret isn’t targeting the (other info), it was targeting the rest of the text.

I used em’s still for consistency with your answer, but you can use spans if you want (probably should)

http://codepen.io/anon/pen/uekpm

[sadunaresh]

check this out.. aquestion on Stackoverflow

refer to the answer marked as correct… it has everything about how text-decoration works….

[WithAn.Es]

This is the technique I was trying to avoid. Just for simplification. Seemed like it should have worked, but was curious if anyone really knew why.

Thanks for your help and time!

[WithAn.Es]

So it’s a spec thing. Good to know. I forget to check that out when encountering things like this with css. Appreciate the link. Thanks.

[Author]

Posts