JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu33">
        <ul>
                <li class="active"><a href="#">Холодные закуски</a></li>
                <li><a href="#">Салаты</a></li>
                <li><a href="#">Горячие закуски</a></li>
        </ul>
</div>

CSS

.menu33 {margin-left: -12px;}
.menu33  ul li {list-style-type: none; float: left; background: url(../вертикальная полоска) right center no-repeat; padding: 6px 12px;}
.menu33 ul li a {color: #cc3333; float: left; text-decoration: none; border-bottom: 1px dashed #cc3333;}
.menu33  ul li:hover a{color: #996666; font-weight: bold; border-bottom: 1px dashed #996666;}

JavaScript

$(".menu33 li").each(function(){
    $(this).css({'width': $(this).outerWidth()+"px"});
});