为何text-underline-offset表现会受text-underline-position: under影响？

这是因为 text-underline-position 改变了 text-underline-offset 的计算基准：

• 默认（text-underline-position: auto）时，下划线的基准位置是文本基线的下方（这个位置不会覆盖g、y这类带有向下延伸部分的字形），text-underline-offset 的值是在这个基准位置基础上，调整下划线与文本的距离。
• 当设置 text-underline-position: under 时，下划线的基准位置被切换为整个文本块所有字形的最底部（也就是g、y这类向下延伸部分的底端），此时 text-underline-offset 的偏移量是基于这个新基准计算的。

你示例里的两个段落，虽然都设置了 text-underline-offset: 10px，但因为基准位置不同，最终下划线的视觉位置出现了差异：

• 未设置 under 的段落：下划线从基线下方的默认位置再向下偏移10px
• 设置了 under 的段落：下划线从所有字形最底部的位置再向下偏移10px

你的示例代码 #

HTML代码

<p class="first">Paragraph</p>
<p class="second">Paragraph</p>

CSS代码

p{
  text-decoration: underline;
  text-underline-offset: 10px;
}

.first{
  text-underline-position: under;
}

内容的提问来源于stack exchange，提问作者im_abramon