<article>
  <p>
    <span class="normal-border">普通の下線 (border-bottom) のサンプル</span><br>
    <span class="inner-border">文字の内側にかかる下線 (linear-gradient) のサンプル</span><br>
    <span class="mixed-border">文字の下端にまたがる下線 (border-bottom + liner-gradient) のサンプル</span>    
  </p>
</article>

body {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  padding: 4vh 10vh 0;
  font-size: 18px;
  line-height: 3;
}

span.normal-border {
  border-bottom: 5px solid orange;
}

span.inner-border {
  background: linear-gradient(transparent 70%, orange 70%);
}

span.mixed-border {
  border-bottom: 4px solid orange;
  background: linear-gradient(transparent 60%, orange 60%);
}