JSFiddle - React, Tailwind, and code Playground

by Vladimir Sobolev

HTML

<ul>
    <li><a href="#"> <span>Ссылка раз</span>
    </a></li><li><a href="#"> <span>Два</span>
    </a></li><li><a href="#"> <span>Ссылка три (длинная)</span>
    </a></li><li><a href="#"> <span>Ссылка четыре</span>
    </a></li><li><a href="#"> <span>Ссылка пять</span> </a></li>
</ul>

CSS

ul, li { padding: 0; }
ul { height: 36px; text-align: justify; text-align-last: justify; margin: 2em 0 0; background: #ccc; overflow: hidden; vertical-align: top; font: 1px/36px calibri, sans-serif; list-style: none; }
li { display: inline;padding:0 1px;}
ul:after { content: ''; display: inline-block; width: 100%; }
a { font-size:18px;text-decoration: none; padding: 7px 0;background:#ddd;}
a span { display: inline-block; }
a:hover { background: yellow; color: red; }
a:before, a:after { content: '\200b'; }

*+html ul{ text-justify: newspaper; }
*+html a { display: inline; text-align: left; zoom: 1; cursor: pointer; }