JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="tree">
     <li><div>Animals</div>
       <ul>
         <li><div>Birds</div>
           <ul>
             <li class="last"><div>Eagle</div></li>
           </ul>
         </li>
           <li><div>Mammals</div>
           <ul>
             <li><div>Elephant</div></li>
             <li class="last"><div>Cats</div>
               <ul>
                 <li><div>Lion</div></li>
                 <li class="last"><div>Tiger</div></li>
               </ul>
             </li>
           </ul>
         </li>
         <li class="last"><div>Reptiles</div>
           <ul>
             <li><div>Snake</li>
             <li class="last"><div>Turtle</div></li>
           </ul>
         </li>
       </ul>
     </li>
   </ul>

CSS

ul.tree {
    line-height: 1.3em;
}
ul.tree, ul.tree ul {
  list-style-type: none;
  padding: 0px;
}
ul.tree ul {
    padding-left: 20px;
}
ul.tree div:after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 1.3em;
    z-index: -1;
}
ul.tree div:hover:after {
    background: red;    
}