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

CSS

ul {
    height: 30px;
    font-family: 'Roboto';
    font-weight: 100;
}

ul li {
    float: left;
    height: 30px;
    line-height: 30px;
     padding: 0 10px;
    position: relative;
}

ul li span {
    position: absolute;
    height: 2px;
    background: #ff0000;
    left: 0;
    bottom: 0;
    -webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
    width: 100%;
}

ul li a {
   position: relative;
    display: block;
    height: 30px;
    text-decoration: none;
}

ul li a:hover span {
 
}