JSFiddle - React, Tailwind, and code Playground

HTML

<span>option 1</span>
<span>option 2</span>
<span>option 3</span>

CSS

span
{
    display: inline-block;
    padding: 6px 0px 4px;
    margin: 0px 8px 0px;
    position: relative;
}

span:before
{
    content: '';
    position: absolute;
    width: 100%;
    height: 0px;
    border-bottom: 1px solid black;
    bottom: 2px;
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: -webkit-transform 0.2s ease-in;
    transition: transform: 0.2s ease-in;
}

span:hover:before
{
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
}