如何实现CSS文本首行下划线效果_通过text-decoration-skip-ink设置-css教程-PHP中文网

text-decoration-skip-ink 是控制下划线是否避开字母下降笔画（如g、y、p）的css属性，设为auto可智能跳过墨迹，none则强制连续穿过；它不控制首行与否，仅优化线条与字形的避让关系。

如何实现css文本首行下划线效果_通过text-decoration-skip-ink设置

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 盒，设置后会被忽略

CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载
尝试用 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; }，但它只优化线条位置，不改变作用范围