HTML CSS how to underline every li in a nested list

Question

Based on w3c, the correct HTML path for a nested list.

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
    <li>Black tea</li>
    <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

However, I need a border at the bottom of each item in the list, the following code emphasizes them all except Tea.

li {
    border-bottom: 1px solid purple;
}

Any suggestions?

Answer 1

There are several ways to solve the problem, I went with this.

li {
    border-bottom: 1px solid purple;
}

li > ul > li:first-child {
    border-top: 1px solid purple;
}

li > ul > li:last-child {
    border: none;
}

Answer 2

Perhaps you can use

text-decoration: underline

This refers to the text in the element.

Your problem is that the licontaining teaone does have a border, but a lower border, so it is below the nested border li.

text-decoration (span div) li . div , , , .

Answer 3

, , :

li {
    border-bottom: 1px solid purple;
}

li > ul {
    border-top: 1px solid purple;
}

li > ul > li:last-child {
    border: none;
}

( )

text-dexoration

Answer 4

"" li , "" li

. JSfiddle

li {
    border-bottom:3px solid red;
}

li ul li {
    border-bottom:3px solid green;
}

Answer 5

, "", , li display: list-item, . display: inline, , li, list-style-type, display: list-item.

li {
    border-bottom: 1px solid purple;
    display: inline;
}
li:after {
    content:"";
    display: block;
}

Answer 6

, li "" "" , "ul" "li", , "". "" li , " " ( , , .) ( ) , li :

<ul>
  <li><span>Coffee</div></li>
  <li><span>Tea</span>
    <ul>
    <li><span>Black tea</span></li>
    <li><span>Green tea</span></li>
    </ul>
  </li>
  <li><span>Milk<span></li>
</ul>

:

li span{
    border-bottom: 1px solid purple;
}

, li, .

Edit: =====================

, -

Answer 7

Give the class add add display: inline-blocklike this:

  <ul>
    <li>
      <ul>
          <li class="underline">
             Some stuff here
          </li>
      </ul>
   </li>
  </ul>

and in your css:

.underline {
     display: inline-block;
     border-bottom: 1px #CCCCCC solid;
}