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;
    line-height: 1.5;
    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;
    top: 0; bottom: 0;
    left: 50%; right: -50%;
    display: inline-block;
    background-image: repeating-linear-gradient(to top, red 0, red 3px, transparent 3px, transparent 1.5em);
    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;
}