linie konturowe w zagnieżdżonym ul

Robię zagnieżdżoną listę i chcę dodać konturowe linie jak na stronie tylko, że nie wiem jak ją usunąć kiedy jest już ostatnie ul w danym ul: oto strona link i kod link

Ja bym to zrobił za pomocą position: relative;/position: absolute; i pseudo elementu ::before/::after.

<ul>
 <li>1</li>
 <li class="fix-border">
   2

   <ul>
     <li>2.1</li>
     <li class="fix-border">2.2</li>
   </ul>
 </li> 
</ul>

.fix-border {
  position: relative;
}

.fix-border::before {
  position: absolute;
  top: calc(50% + 36px);
  left: 8px;
  bottom: 0;
  width: 10px;
  background: inherit;
  content: '';
}

Tylko musiałbyś dopasować właściwości left/top, bo nie sprawdzałem, czy wszędzie będzie jednakowo.

Mógłbyś zrobić po prostu

li.fix-border {
  border-bottom: 1px solid green;
}

li.fix-border:last-child {
  border: none;
}