JSFiddle - React, Tailwind, and code Playground

HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ante risus, maximus in consectetur nec, pellentesque quis diam. Etiam vel feugiat enim. <a href="">Etiam ultrices id dolor vitae accumsan. Nullam at semper ante. Interdum et malesuada fames ac ante ipsum primis in faucibus.</a> Sed pulvinar nulla et facilisis varius. Pellentesque habitant morbi tristique senectus et netus et mal

CSS

a{
    position: relative;
    display: inline-block;
    color: red;
    text-decoration: none;
    -webkit-transition: all 0.4s ease 0s;transition: all 0.4s ease 0s;
}
a:before {
    -webkit-transform: translateX(-50%) translateY(0);-ms-transform: translateX(-50%) translateY(0);transform: translateX(-50%) translateY(0);
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    height: 3px;
    background: red;
    width: 0;
    opacity: 0;
    -webkit-transition: all 0.4s ease 0s;transition: all 0.4s ease 0s;
}
a:hover, .entry-content a:focus, .entry-content a:active {
  color: black;
}
a:hover:before, .entry-content a:focus:before, .entry-content a:active:before {
    width:100%;
    opacity: 1;
}