Menu
The following code show have two nested lists. The outer one with text-decoration:line-through property and the other with no line through. How can I remove this inner line-through or not apply it in the first place?!! I want line-through on the word "outer" but not "inner"
<DOCTYPE html>
<header><style>
ol li {text-decoration:line-through; color:red;}
ol li ul li{text-decoration:none; color:pink;}
</style></header>
<body>
<ol>
<li>Outter
<ul>
<li>
Inner
</li>
</ul>
</li>
</ol>
</body>
684
You can use display: inline-block to avoid parent's text-decoration affecting its children.
Demo
It works because, according to the specs,
When specified on or propagated to an inline element, it affects all the boxes generated by that element, and is further propagated to any in-flow block-level boxes that split the inline (see section 9.2.1.1). But, in CSS 2.1, it is undefined whether the decoration propagates into block-level tables. For block containers that establish an inline formatting context, the decorations are propagated to an anonymous inline element that wraps all the in-flow inline-level children of the block container. For all other elements it is propagated to any in-flow children. Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.
115
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
