JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#">Red text and underline</a>

<br>
<br>
<a href="#" class="underline">Red text with </a>

CSS

a {
    font-size: 24px;
    color: red;
}
a.underline {
    text-decoration: none;
    box-shadow: inset 0 -4px 0 0 rgba(255, 255, 255, 1), inset 0 -5px 0 0 rgba(0, 0, 0, 1);
}
a.underline:after {
    content:"black underline"
}
a.underline:hover {
    box-shadow: inset 0 -4px 0 0 rgba(255, 255, 255, 1), inset 0 -5px 0 0 rgba(0, 255, 0, 1);
}
a.underline:hover:after {
    content:"green underline"
}