text-decoration-skip-ink 是控制下划线是否避开字母下降笔画（如g、y、p）的CSS属性，设为auto可智能跳过墨迹，none则强制连续穿过；它不控制首行与否，仅优化线条与字形的避让关系。
text-decoration-skip-ink 是什么，它能控制首行下划线吗？
text-decoration-skip-ink 不是用来“只给首行加下划线”的属性，它的作用是控制下划线是否跳过文字的笔画（尤其是 ascender/descender 区域），避免下划线被字母顶部或底部截断。默认值是 auto，浏览器会自动避开字母 g、y、p 等的下伸部分；设为 none 则强制下划线连续穿过所有字符下方。
- 它对「是否仅作用于首行」毫无影响——
text-decoration本身是整块文本统一渲染的，不区分行 - 它也不能让第二行以下不显示下划线，更不是
first-line的替代方案 - 常见误判：看到某段文字只有首行有下划线，其实是用了
::first-line伪元素 +text-decoration组合，和skip-ink无关
真想只给首行加下划线，该用什么？
必须借助 ::first-line 伪元素 + text-decoration 显式声明，且需注意继承限制：
-
::first-line只能应用部分 CSS 属性，text-decoration是其中之一，但text-decoration-color和text-decoration-style在部分旧浏览器中不被支持 - 必须确保目标元素是块级容器（如
p、div），且内部是纯文本或行内元素；若嵌套了span或其他块级元素，首行逻辑可能失效 - 示例：
p { text-decoration: none; /* 先清除整体 */ } p::first-line { text-decoration: underline; text-decoration-color: #007bff; text-decoration-style: solid; } - 注意：如果段落里有
<br>
或 inline-block 元素打断行盒（line box），::first-line可能只覆盖到第一个换行前的内容，行为不可靠
为什么 border-bottom + first-line 行不通？
border-bottom 无法在 ::first-line 上生效，因为：
-
::first-line是一个伪元素，但它不生成独立盒子，只是对第一行文本的“样式层”抽象立即学习“前端免费学习笔记（深入）”；
border-bottom要求元素有盒模型（box model），而::first-line不具备真正的 border 盒，设置后会被忽略尝试用
background或linear-gradient模拟下划线时，同样受限于::first-line对背景属性的支持程度（Chrome 支持，Safari 15.4+ 才稳定）若需要更可控的首行下划线（比如避开 descender、带动画、多色），建议改用包裹首行文本的
span手动标记，而非依赖伪元素text-decoration-skip-ink可以配合使用，例如：p::first-line { text-decoration: underline; text-decoration-skip-ink: auto; }，但它只优化线条位置，不改变作用范围
容易被忽略的兼容性坑
-
text-decoration-skip-ink: auto 在 Safari 12–14 中表现异常，可能完全不跳过 descender，导致下划线被字母 y/g 截断；可降级为 text-decoration-skip-ink: none + 手动调 text-underline-offset
-
text-underline-offset 才是真正用来上下微调下划线位置的属性，和 skip-ink 配合使用才有意义，但 IE 完全不支持，Edge 18– 不支持 offset
- 如果你用的是 Flex/Grid 容器内的文本，
::first-line 可能根本不起作用——规范明确指出伪元素不适用于 display: flex / grid 的直接子元素
text-decoration-skip-ink: auto 在 Safari 12–14 中表现异常，可能完全不跳过 descender，导致下划线被字母 y/g 截断；可降级为 text-decoration-skip-ink: none + 手动调 text-underline-offset
text-underline-offset 才是真正用来上下微调下划线位置的属性，和 skip-ink 配合使用才有意义，但 IE 完全不支持，Edge 18– 不支持 offset
::first-line 可能根本不起作用——规范明确指出伪元素不适用于 display: flex / grid 的直接子元素首行下划线不是靠一个属性开关就能搞定的事，它本质是布局与渲染层的边界问题；text-decoration-skip-ink 只负责“画得干净”，不负责“画在哪”。
