text-underline-offset是现代浏览器控制下划线距文字基线距离的首选方案，但safari≤15.3不支持，需用::after+ex单位或box-shadow等兼容方案兜底。
text-underline-offset 是首选，但不支持旧版 Safari 时得换方案
现代浏览器里调下划线距离，text-underline-offset 是最干净的解法——它专为这事设计，不影响行高、不破坏内联流、语义正确。但 Safari ≤15.3 完全不识别这个属性，Chrome 89+ 和 Firefox 70+ 支持良好。如果你的用户仍有较老 macOS/iOS 设备，光靠它会回退到紧贴文字的默认位置，视觉上明显“压字”。
这时候不能硬加 @supports 就完事：它只做检测，不提供替代渲染逻辑。真要兜底，得准备另一套可运行的视觉方案，比如用 ::after 模拟线条。
::after 模拟下划线时，bottom 值不是“距离”，而是相对基线的绝对偏移
很多人写 ::after { bottom: 4px; } 以为 4px 就是文字和线之间的空隙，其实不是。这里的 bottom 是从元素**内容盒底部**（不是字体基线）向下算起的。而字体下降部（descender）长度因字体而异，比如 Georgia 的 descender 比 system-ui 长得多，同一 bottom: 4px 在不同字体下实际视觉距离可能差 2px 以上。
更稳妥的做法是结合 ex 单位（1ex ≈ 当前字体小写字母 x 的高度），它天然适配字体结构：
a {
position: relative;
text-decoration: none;
}
a::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0.15ex; /* 真实距离随字体变化，但比例稳定 */
height: 1px;
background: currentColor;
}
-
position: relative必须加在父元素上，否则::after会相对于最近定位祖先定位，容易错位 -
right: 0要写，不然长文本换行时下划线可能截断 - 避免用
border-bottom+padding-bottom：它会撑开行高，影响多行段落对齐，且无法响应line-height: 1.2这类缩放
多行文本用 ::after 会断线，得用 background-image 或 box-shadow 补救
::after 默认是单层伪元素，只能画一条横线；遇到换行的 <p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 或 <span></span>，下划线会在断行处消失。这不是 bug，是它的设计限制。
如果必须支持多行且保持连续下划线，两个轻量方案：
- 用
background-image: linear-gradient()沿底部铺线，配合background-position: bottom 0.2em控制距离（0.2em相对于font-size，比 px 更稳） - 或用
box-shadow: 0 0.2em 0 0 currentColor，其中第二个值就是垂直偏移，简单粗暴，兼容性极好（IE9+）
注意：box-shadow 方案中，若文字有 line-height > 1，阴影可能被上一行遮挡，此时需确保容器 overflow: visible 且无裁剪。
字体变化时，所有基于 px 的 offset 都可能失效
哪怕你用 text-underline-offset: 4px，一旦用户系统字体被替换（比如 macOS 开启了“使用粗体”或 Windows 启用了 ClearType 微调），或者页面动态切换了 font-family，4px 就不再是原来那个“4px”。尤其在响应式字号（font-size: clamp(1rem, 2.5vw, 1.5rem)）场景下，px 值完全脱离字体上下文。
真正可靠的单位只有：ex（最推荐）、em（需注意是相对于当前 font-size，不是基线）、ch（较少用）。例如 text-underline-offset: 0.2ex 在思源黑体、Noto Serif、Inter 下，视觉距离一致性远高于 2px。
最后提醒一句：别为了“精确控制”把 text-decoration-thickness 设成 0.8px —— 多数屏幕物理像素不支持亚像素渲染，最终还是取整为 1px，反而让 offset 计算失准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
