JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Required Navigation (broken) </h3>
<nav class="innerNav">
    <ul>
        <li>One </li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
    </ul>
</nav>


<!-- below just for illustration purposes -->
<h3>Illustration of how it should look like</h3>

<nav class="oldWay">
    <ul>
        <li>One</li>
        <li class="seprator">|</li>
        <li>Two</li>
        <li class="seprator">|</li>
        <li>Three</li>
        <li class="seprator">|</li>
        <li>Four</li>
    </ul>
</nav>

CSS

.innerNav li {
    display: inline-block;
    border-bottom: 3px solid red;
    margin-left: 10px;
    position: relative;
}

.innerNav li:before {
    content: "|";
    position: absolute;
    left: -8px;
    color: blue;
    border: 0;
    padding-right: 10px;
}

.innerNav li:first-child:before {
    display: none;
}

/** below just for illustration purposes **/

.oldWay li {
    display: inline-block;
    border-bottom: 3px solid red;
}

.oldWay li.seprator {
    display: inline-block;
    border: 0;
    padding: 0 5px;
    
}