JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#"><span>aosgibmoa bnocibnas</span></a>

CSS

a{
    display:inline-block;
    background:green;
    position:relative;
    padding:2px 5px;
}
a>span{
    position:relative;
}

a::before{
    content:'';
    background:red;
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:0%;
    -webkit-transition:width .3s ease-out;
}
a:hover::before{
    width:100%;
}