JSFiddle - React, Tailwind, and code Playground

by Mike Gifford

HTML

<a href="#">This is here</a>
and not there.

CSS

a {
   position: absolute;
   padding-bottom: 2px;
   bottom: 1px;
   left: 0;
   height: 1px;
   width: 100%;
   text-decoration: none;
   background: -webkit-gradient(linear, left top, right top, color-stop(0%,transparent), color-stop(50%,#444), color-stop(100%,transparent));
   background: -webkit-linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
   background: -moz-linear-gradient(left, transparent 0%, #444 50%, #transparent 100%);
   background: -ms-linear-gradient(left, transparent 0%,#444 50%,#transparent 100%);
   background: -o-linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
   background: linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
}

a:hover::after, a:focus::after  {
   content: "";
   position: absolute;
   bottom: 1px;
   left: 0;
   height: 1px;
   width: 100%;
   background: red;
   background: -webkit-gradient(linear, left top, right top, color-stop(0%,transparent), color-stop(50%,#444), color-stop(100%,transparent));
   background: -webkit-linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
   background: -moz-linear-gradient(left, transparent 0%, #444 50%, #transparent 100%);
   background: -ms-linear-gradient(left, transparent 0%,#444 50%,#transparent 100%);
   background: -o-linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
   background: linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
   }