JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <a>test</a>
</div>
<div class="noUnderline_link">
  <a>test</a>
</div>

CSS

div.uicore-type-post a,
article.type-post .ui-e-post-content a,
body.page article a,
body div:not(.noUnderline_link) a {
  color: #333333;
  text-decoration: none;
  display: inline-block;
  font-weight: 500;
  padding: 0 0 0.25em;
  margin-left: 0;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);

  &:before,
  &:after {
    position: absolute;
    content: "";
    border-bottom: 2px solid #f7251c;
    border-radius: 1em;
    bottom: 0.3em;
    transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  &:before {
    width: 1em;
    transform-origin: left;
  }
  &:after {
    width: 90%;
    left: 1em;
    transform: translateX(110%);
  }
  &:hover:before {
    transform: scaleX(0.3);
  }
  &:hover:after {
    transform: translateX(0);
  }
}