JSFiddle - React, Tailwind, and code Playground

HTML

<p>What's up with the extra space after "Option Two," before the divider?</p>


<ul>
    <li>Option Zero</li>
    <li>Option One Is Longer</li>
    <li class='current'>Option Two<ul class='sub-menu'>
            <li>Sub One</li>
        </ul></li>
    <li>Option Three Is Not the Best</li>
</ul>

CSS

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing:    border-box;
	box-sizing:         border-box;
}

body {background:#ccc;font-size:18px;font-family:Arial,sans-serif;font-weight:bold;}

ul {list-style:none;width:100%;background:green;height:50px;padding:10px 10px 0 10px;margin:0px;}
li {float:left;margin-top:10px;}
li:after {content:"|";margin:0 8px;}
.sub-menu {display:none;}