JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="pr pr1">
    <li>
        item1
        <ul>
            <li>item1_1</li><li>item1_2</li>
        </ul>
    </li>
    <li>
        item2
    </li>
    <li>
        item3
        <ul>
            <li>item3_1</li><li>item3_2</li>
        </ul>
    </li>
</ul>

<ul class="pr pr2">
    <li>
        item1
        <ul>
            <li>item1_1</li><li>item1_2</li>
        </ul>
    </li>
    <li>
        item2
    </li>
    <li>
        item3
        <ul>
            <li>item3_1</li><li>item3_2</li>
        </ul>
    </li>
</ul>

<ul class="pr pr3">
    <li>
        item1
        <ul>
            <li>item1_1</li><li>item1_2</li>
        </ul>
    </li>
    <li>
        item2
    </li>
    <li>
        item3
        <ul>
            <li>item3_1</li><li>item3_2</li>
        </ul>
    </li>
</ul>

CSS

body {
    background: #f0f0f0;
}

ul.pr {
    padding: 0 0 20px 20px;
    float: left;
}

ul.pr > li {
   position: relative;   
}

ul.pr1 > li > ul:after {
    content: '+';
    position: absolute;
    top: 0;
    left: -15px;
}

ul.pr2 > li {
    padding: 0 10px;
}

ul.pr2 > li > ul:after {
    content: '';
    position: absolute;
    top: 0;
    height: 1em;
    left: 0;
    width: 100%;
    border: 1px solid red;
}
ul.pr3 > li {
    padding: 0 10px;
}

ul.pr3 > li > ul:after {
    content: '';
    position: absolute;
    top: 0;
    height: 1.2em;
    left: 0;
    width: 100%;
    background: red;
    z-index: -1;
}