JSFiddle - React, Tailwind, and code Playground

by pohuski

HTML

<p>This is a <a href="#">different color</a> underline for text.</p>

CSS

a {
  text-decoration: none;
  display: inline-table;
}

a:after {
  content: "";
  border-bottom: 0.1em solid #f00;
  display: table-caption;
  caption-side: bottom;
  position: relative;
  margin-top:-0.15em;
}