JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="tree">
    <li><a>Item1</a><div class="separator"></div></li>
    <li><a>Item2</a><div class="separator"></div>
        <ul>
            <li><a>Item3</a><div class="separator"></div></li>
            <li><a>Item4</a><div class="separator"></div></li>
            <li><a>Item5</a><div class="separator"></div>
                <ul>
                    <li><a>Item6</a><div class="separator"></div></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:hover {
        background-color: #DDDDDD;
    }

    ul.tree ul li {
        padding-left: 30px;
    }

div.separator {
    position:absolute;
    left:0px;
    right:0px;
    border-top:1px solid lightgray;
}

JavaScript

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