JSFiddle - React, Tailwind, and code Playground

by shapeshifta

HTML

<ul class="cool">
    <li>Eins</li>
    <li>Zwei</li>
    <li>Drei</li>
    <li>Vier</li>
</ul>

<ul class="not-cool">
    <li>Eins</li>
    <li> | </li>
    <li>Zwei</li>
    <li> | </li>
    <li>Drei</li>
    <li> | </li>
    <li>Vier</li>
</ul>

CSS

ul li{display:inline-block; text-decoration:none}

.cool li:after{content:"|"; display:inline-block;padding:0 2px;background:red}
.cool :last-child:after{content:""}