JSFiddle - React, Tailwind, and code Playground

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>
</ul>

CSS

ul, li { padding: 0; }
ul { height: 44px; text-align: justify; text-align-last: justify; margin: 2em 0 0; background: #ccc;  vertical-align: top; font: 20px/44px calibri, sans-serif; border-radius: 4px; list-style: none; min-width: 550px; }
li { display: inline; }
ul:after { content: ''; display: inline-block; width: 100%; }
a { text-decoration: none; padding: 9px 0; border-radius: 3px;  box-shadow: 1px 1px 2px rgba(0,0,0,.4) inset, -1px -1px 2px rgba(255,255,255,.4) inset; background: #ccc; color: green; }
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; }