JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="tree">
    <li><a>Item1</a></li>
    <li><a>Item2</a>
        <ul>
            <li>
             <a>Item3</a>
               <ul>
                 <li>
                   <a>Item4</a>
                   <ul>
                     <li>
                       <a>Item5</a>
                     </li>
                   </ul>                     
                 </li>
               </ul>
            </li>
        </ul>
    </li>
</ul>

CSS

ul.tree, ul.tree ul {
      list-style:none;
      margin:0;
      padding:0;
      font-family: Arial, sans-serif;
      font-size: 12px;
    }
    
    ul.tree a {
      display: block;
      height:30px;
      line-height: 30px;
      padding-left: 15px;
    }
    ul.tree a:before {
      content: '';
      height: 30px;
      position: absolute;
      left: 0;
      right: 0;
      z-index: -1;
      border-bottom-width: 1px;
      border-bottom-color: lightgray;
      border-bottom-style: solid;
    }

    ul.tree a:hover:before {
      background-color: #DDDDDD;
    }

    ul.tree {
        position: relative;
    }

    ul.tree a + ul {
       padding-left: 15px;
    }

JavaScript

/* right now I have to use js to update the padding on each <a> element */