How to underline only top-items in a nested list? - css

Question

Consider the following code:
<ol class=top>
<li>Top item
<ol>
<li>Sub</li>
<li>list</li>
<li>item.</li>
</ol>
</li>
</ol>
And css:
.top > li {
text-decoration: underline;
}
.top ol li {
text-decoration: none;
}
Fiddle: http://jsfiddle.net/fLvns1z0/1/
I want only the "Top item" be underlined, but instead whole text is underlined. Even !important doesn't help.
Any ideas how to make it work and keep the code as simple as possible?

Answer 1

If you don't want to add an extra span or any other element to achieve the result as said by others, you can use css :first-line sudo class, check the working example below:
.top > li:first-line {
text-decoration: underline;
}
<ol class="top">
<li>Top item
<ol>
<li>Sub</li>
<li>list</li>
<li>item.</li>
</ol>
</li>
</ol>

Answer 2

It looks like it's because of the behaviour of <li> tag. If possible, please add a <span> and it should be fine:
.top span {
text-decoration: underline;
}
<ol class=top>
<li><span>Top item</span>
<ol>
<li>Sub</li>
<li>list</li>
<li>item.</li>
</ol>
</li>
</ol>
Also, when you add a <span> tag, you are clearly giving a separation. Plus the real reason is I am unable to fix the other way. Sorry about that. :(

Answer 3

You can redefine text-decoration with the same color as background:
.top > li {
text-decoration: underline;
}
.top ol li{
text-decoration: underline;
text-decoration-color: #fff;
}
<ol class=top>
<li>Top item
<ol>
<li>Sub</li>
<li>list</li>
<li>item.</li>
</ol>
</li>
</ol>
Or make some changes to the behavior of elements:
.top > li {
text-decoration: underline;
}
.top ol{
display:inline-block;
width:100%;
box-sizing:border-box;
}
<ol class=top>
<li>Top item
<ol>
<li>Sub</li>
<li>list</li>
<li>item.</li>
</ol>
</li>
</ol>