CSS 라이브 데모: text-underline-position 데모 버튼을 클릭해 보세요!
selector {
    text-underline-position: auto | [ from-font | under ] || [ left | right ]
}
/* 단일 키워드 값 */
text-underline-position: auto;
text-underline-position: from-font;
text-underline-position: under;
text-underline-position: left;
text-underline-position: right;

/* 두 개 키워드 값 */
text-underline-position: from-font left;
text-underline-position: under left;
text-underline-position: right under;

/* 전역 값 */
text-underline-position: inherit;
text-underline-position: initial;
text-underline-position: revert;
text-underline-position: revert-layer;
text-underline-position: unset;
<div class="example-box">
    <div class="label">text-underline-position: auto;</div>
    <p class="auto-underline">
        Velocity: v<sub>avg</sub> = d / t
    </p>
</div>

<div class="example-box">
<div class="label">text-underline-position: under;</div>
    <p class="under-underline">
        Velocity: v<sub>avg</sub> = d / t
    </p>
</div>
.example-box {
    font-size: 28px;
    border: 1px solid;
    padding: 1em 1em 0;
}
.example-box + .example-box {
    margin-top: 0.5em;
}
.auto-underline {
    text-decoration: underline;
    text-underline-position: auto;
}
.under-underline {
    text-decoration: underline;
    text-underline-position: under;
}
.label {
    font-size: 16px;
    color: #555;
    margin-bottom: 4px;
}
실제 적용된 모습
selector {
    text-underline-position: auto | [ from-font | under ] || [ left | right ]
}
<div class="container left">
    <p class="horizontal">
        text-underline-position: under left
    </p>
    <p class="vertical">
        text-underline-position: under left;
    </p>
</div>
<div class="container right">
    <p class="horizontal">
        text-underline-position: under right;
    </p>
    <p class="vertical">
        text-underline-position: under right; 
    </p>
</div>
.container {
    border: 1px solid;
    padding: 0 1em 1em;
}
.container + .container {
    margin-top: 0.5em;
}
.left {
    text-decoration: underline;
    text-underline-position: under left;
}
.right {
    text-decoration: underline;
    text-underline-position: under right;
}
.vertical {
     writing-mode: vertical-rl;
}
실제 적용된 모습