3

CSS :

ol {
    margin: 0 30px;
}
    li {
        margin: 15px 0;
    }
    li.done {
        text-decoration: line-through;
    }
    li.done span {
        text-decoration: none;
        background: #ff0;
    }

HTML :

<ol>
    <li class="done">Hello <span>World</span></li>
    <li>World</li>
</ol>

JSFiddle Demo : http://jsfiddle.net/pZye7/5/ . And something weird on JSFiddle, ordered list's numbers are not displayed.

My requirement : the word "World" should not have the line-through on it.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
KBN
  • 2,915
  • 16
  • 27
  • 1
    That's quite strange. And it's cross-browser. Chrome, FF, IE9. Concerning the jsFiddle "oddity": if you uncheck *Normalized CSS*, they will appear. Checking it activates the reset CSS. – kapa May 07 '12 at 08:34
  • 2
    possible duplicate of http://stackoverflow.com/questions/4481318/css-text-decoration-property-cannot-be-overridden-by-child-element and http://stackoverflow.com/questions/1823341/how-do-i-get-this-css-text-decoration-override-to-work – BoltClock May 07 '12 at 08:39
  • @bažmegakapa & BoltClock Thank you both for the info. – KBN May 07 '12 at 08:43

1 Answers1

4
li.done span {
    text-decoration: none;
    background: #ff0;
    display: inline-block; /* This solved the problem.*/
}

Reason: Unknown

KBN
  • 2,915
  • 16
  • 27
  • 4
    The reason is stated in the two duplicates I link to in the comments above. You simply cannot undo a parent's text decorations within its children. – BoltClock May 07 '12 at 08:39