CSS如何实现文字下划线与文字的距离调整_利用::after模拟自定义线条

text-underline-offset是现代浏览器控制下划线距文字基线距离的首选方案，但Safari≤15.3不支持，需用::after+ex单位或box-shadow等兼容方案兜底。 text-underline-offset 是首选，但不支持旧版 Safari 时得换方案 现代浏览器里调下划线距离， 是最干净的解法——它专为这事设计，不影响行高、不破坏内联流、语义正确。但 Safari ≤15.3 完全不识别这个属性，Chrome 89+ 和 Firefox 70+ 支持良好。如果你的用户仍有较老 macOS/iOS 设备，光靠它会回退到紧贴文字的默认位置，视觉上明显“压字”。 这时候不能硬加 就完事：它只做检测，不提供替代渲染逻辑。真要兜底，得准备另一套可运行的视觉方案，比如用 模拟线条。 ::after 模拟下划线时，bottom 值不是“距离”，而是相对基线的绝对偏移 很多人写 以为 4px 就是文字和线之间的空隙，其实不是。这里的 是从元素**内容盒底部**（不是字体基线）向下算起的。而字体下降部（descender）长度因字体而异，比如 的 descender 比 长得多，同一 在不同字体下实际视觉距离可能差 2px 以上。 更稳妥的做法是结合 单位（1ex ≈ 当前字体小写字母 x 的高度），它天然适配字体结构： 立即学习 “ 前端免费学习笔记（深入） ”； 必须加在父元素上，否则 会相对于最近定位祖先定位，容易错位 要写，不然长文本换行时下划线可能截断 避免用 + ：它会撑开行高，影响多行段落对齐，且无法响应 这类缩放 多行文本用 ::after 会断线，得用 background-image 或 box-shadow 补救 默认是单层伪元素，只能画一条横线；遇到换行的 或 ，下划线会在断行处消失。这不是 bug，是它的设计限制。 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更 下载 如果必须支持多行且保持连续下划线，两个轻量方案： 用 沿底部铺线，配合 控制距离（ 相对于 ，比 px 更稳） 或用 ，其中第二个值就是垂直偏移，简单粗暴，兼容性极好（IE9+） 注意： 方案中，若文字有 ，阴影可能被上一行遮挡，此时需确保容器 且无裁剪。 字体变化时，所有基于 px 的 offset 都可能失效 哪怕你用 ，一旦用户系统字体被替换（比如 macOS 开启了“使用粗体”或 Windows 启用了 ClearType 微调），或者页面动态切换了 ，4px 就不再是原来那个“4px”。尤其在响应式字号（ ）场景下，px 值完全脱离字体上下文。 真正可靠的单位只有： （最推荐）、 （需注意是相对于当前 ，不是基线）、 （较少用）。例如 在思源黑体、Noto Serif、Inter 下，视觉距离一致性远高于 。 最后提醒一句：别为了“精确控制”把 设成 —— 多数屏幕物理像素不支持亚像素渲染，最终还是取整为 1px，反而让 offset 计算失准。