HTML CSS how do I underline every li in a nested list

Question

Based on w3c the correct way in HTML for a nested list is.

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

However I want a border at the bottom of each item in the list, the following code underlines them all but Tea.

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

Any suggestions?

Answer 1

Maybe you can use

text-decoration: underline

This applies to the text in the element.

Your problem is that the li containing tea actually does have a border, but it's a bottom border, so it is below the nested li.

Instead of using text-decoration you can also wrap the text in another element (span or div) inside the li elements, and apply the border to that. Such a solution using div is especially useful if you want the border to be the full width of the element instead of the text alone.