JSFiddle - React, Tailwind, and code Playground

by peteryates

HTML

<ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li>
        <a href="#">3</a>
        <ul>
            <li><a href="#">3.1</a></li>
            <li><a href="#">3.2</a></li>
            <li><a href="#">3.3</a></li>
        </ul>
    </li>
</ul>

CSS

a {
    display: block;
    margin: 0 15px;
    border: 1px solid #aaa;
}

ul {
    padding: 0 0 0 1px;
    margin: 1px 0 0 15px;    
}

ul li  {
    border-left: 1px dotted black;
    position: relative;
}

ul > li  {
    padding-bottom: 10px;
}

ul li:before {
    content: '';
    width: 14px;
    position: absolute;
    border-bottom: 1px dotted black;
    left: 0px;
    top: 0.5rem;
}


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

ul li:last-child:before {
   border-left:1px dotted black;
   height: 10px;
   margin-top:-10px;
}