JSFiddle - React, Tailwind, and code Playground

HTML

<p>Here's my <a href="#">underlined link</a>!</p>
<p>Here's one where the <a href="#" class="near">underline</a> is closer.</p>
<p>And one where the <a href="#" class="far">underline</a> is further away.</p>

CSS

a, a:hover {
  position: relative;
  text-decoration: none;
  color: black;
}
a:after {
  content: '';
  display: block;
  position: absolute;
  height: 0;
  top:90%;
  left: 0;
  right: 0;
  border-bottom: solid 1px red;
}
a.near:after {
  top:83%;
}
a.far:after {
  top:100%;
}