JSFiddle - React, Tailwind, and code Playground

HTML

<a href="https://jsfiddle.net/">JS FIDDLE EXAMPLE</a>

CSS

a {
    color: #4c4c4c;
    font-size: 17px;
    text-decoration: none;
    padding-bottom: 3px;
    position: relative;
    border: 0;
    background-color: transparent;
}

a::before {
  background-color: #cecdcd;
}

a::after {
  background-color: #4c4c4c;
  transform-origin: left;
}

a::after,
a::before {
  content: '';
  position: absolute;
  bottom: 2px;
  right: 0;
  left: auto;
  height: 1px;
  overflow: hidden;
  width: 100%;
}

a:hover::after {
  animation: linkBorderHover 0.4s;
  animation-delay: 0.2s;
  animation-fill-mode: forwards;
  transform: scaleX(0);
}