JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>about</li>
    <li>contact</li>
    <li>social</li>
</ul>

CSS

li {
    display: inline-block;
    padding: 10px;
    overflow: hidden;
    position: relative;
}
li:after {
    transition: all 0.4s ease-out;
    content: ' ';
    display: block;
    width: 100%;
    height: 4px;
    background: red;
    position: absolute;
    bottom: 0;
    left: -100%;
}
li:hover:after {
    left: 0;
}