text-underline-position 「文字下線の位置を指定」

<style type="text/css">
.common div{
  font-family   : "メイリオ", sans-serif;
  width         : 290px;
  border        : 2px solid #6495ed;
  background    : #e7e7ff;
  padding       : 5px;
}
div.cssTitle {
  margin-top    : 10px;
  background    : #6495ed;
  color         : #fff;
  font-weight   : bold;
}
.css-auto{text-underline-position : auto;}
.css-under{text-underline-position : under;}
.css-right{text-underline-position : right;}
.css-left{text-underline-position : left;}
.css-decoration{
  text-decoration : underline;
  -webkit-text-decoration : underline;
}
.css-decoration-line{
  text-decoration-line : underline;
  -webkit-text-decoration-line : underline;
}
.css-writing-mode{
  writing-mode: tb-rl;
  height: 100px;
}
</style>
<!-- html -->
<div class="common">
  <div class="cssTitle">text-underline-position:auto<br>（ブラウザ依存）</div>
  <div>
  <span class="css-auto css-decoration">ブラウザ依存表示確認</span>
  </div>
  <div class="cssTitle">text-underline-position:under<br>（下段表示）</div>
  <div>
  <span class="css-under css-decoration"><rb>下段表示確認</span>
  </div>
  <div class="cssTitle">text-underline-position:right<br>（右側表示）</div>
  <div class="css-writing-mode">
  <span class="css-right css-decoration-line"><rb>右側表示確認</span>
  </div>
  <div class="cssTitle">text-underline-position:left<br>（左側表示）</div>
  <div class="css-writing-mode">
  <span class="css-left css-decoration-line"><rb>左側表示確認</span>
  </div>
</div>