JSFiddle - React, Tailwind, and code Playground

HTML

<p>no relative positoning so red bar is upper left of the viewport:</p>

<ul class="static">
<li>Nav 1</li>
<li>Nav 3</li>
<li>Nav 4</li>
</ul>

<hr>

<p>li is realtive positioned:</p>

<ul class="relative">
<li>Nav 1</li>
<li>Nav 3</li>
<li>Nav 4</li>
</ul>

CSS

body {
   padding: 2em;   
}

li {
    padding-left: 3px;  
    float: left;
}
ul {
   overflow: hidden; /* clear float */   
}

.relative li {
   position: relative;   
}

li:not(:first-child):before{
    position: absolute;
    display: block;
    content: "";
    
    left: 0;
    top: 0;

    background: #f00;
    height: 20px;
    width: 3px;
}