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

if you mean border bottom on everything you will need to do something like this:

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

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

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

Example
Alternative
Same length lines (but you'll have to find a way to indent the second level bullets)

Otherwise just use text-dexoration