下線の表示場所を指定します。

.uline {
  text-decoration: underline;
  font-size: 20pt;
  margin-bottom: .5rem;
}
.vertical {
  writing-mode: vertical-rl;
}
.tup-auto {
  text-underline-position: auto;
}
.tup-under {
  text-underline-position: under;
}
.tup-left {
  text-underline-position: left;
}
.tup-right {
  text-underline-position: right;
}

<div class="uline tup-auto">Apple(auto)</div>
<div class="uline tup-under">Apple(under)</div>
<div class="uline vertical tup-left">縦書き</div><br>
<div class="uline vertical tup-right">縦書き</div>

• https://developer.mozilla.org/ja/docs/Web/CSS/text-underline-position
• https://drafts.csswg.org/css-text-decor/#text-underline-position-property