JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu1">
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
    <li>Menu 4</li>
</ul><br />
<ul class="menu2">
    <li>Menu 1<span>|</span></li>
    <li>Menu 2<span>|</span></li>
    <li>Menu 3<span>|</span></li>
    <li>Menu 4</li>
</ul>

CSS

/* Com display:inline-block */
ul.menu1 li{
    display:inline-block;
    position:relative;
    padding:10px;
}
ul.menu1 li:after{
   content: '|';
   position: absolute;
   top: 0px;
   left: -4px;
}

/* Com float:left */
ul.menu2 li{
    float:left;
    position:relative;
    list-style:none;
    padding:10px;
}
ul.menu2 li span{
    position: absolute;
    left: 64px;
    top: 0px;
}