JSFiddle - React, Tailwind, and code Playground

HTML

<p><strong>Regular link:</strong></p>
<div class="example">
    <p>I<a href="">link</a></p>
</div>

<p><strong><code>:after</code> underline technique</strong></p>
<div class="example">
    <p>I<a class="after-underline" href="">long link</a></p>
</div>

<p><strong><code>SmartUnderline</code></strong></p>
<div class="example">
    <p>I am a paragraph with a <a class="smart-underline" href="">long link which wraps to a second line.</a></p>
</div>

CSS

html, body {
    background: #fff;
}

body {
    -webkit-font-smoothing: antialiased;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 13px;
    line-height: 1.4em;
}

.example {
    width: 100px;
}

a.after-underline {
    color:#000;
    text-decoration: none;
    text-shadow: -1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff;
    position: relative;
}

a:after {
    display: block;
    position: absolute;
    width: 100%;
    border-top: 1px solid #000;
    content: "";
    bottom: 0.1em;
    z-index:-1
}

a.smart-underline {
  color: #000;
  text-decoration: none;
  background: -webkit-linear-gradient(#fff, #fff), -webkit-linear-gradient(#fff, #fff), -webkit-linear-gradient(#000, #000);
  background: -moz-linear-gradient(#fff, #fff), -moz-linear-gradient(#fff, #fff), -moz-linear-gradient(#000, #000);
  background: -o-linear-gradient(#fff, #fff), -o-linear-gradient(#fff, #fff), -o-linear-gradient(#000, #000);
  background: -ms-linear-gradient(#fff, #fff), -ms-linear-gradient(#fff, #fff), -ms-linear-gradient(#000, #000);
  background: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#000, #000);
  -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
  -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
  background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
  background-repeat: no-repeat, no-repeat, repeat-x;
  text-shadow: 0.03em 0 #fff, -0.03em 0 #fff, 0 0.03em #fff, 0 -0.03em #fff, 0.06em 0 #fff, -0.06em 0 #fff, 0.09em 0 #fff, -0.09em 0 #fff, 0.12em 0 #fff, -0.12em 0 #fff, 0.15em 0 #fff, -0.15em 0 #fff;
  background-position: 0% 90%, 100% 90%, 0% 90%;
}