::first-line 不支持 text-decoration，需用伪元素绝对定位、background-image 渐变或显式 span 包裹实现首行下划线；其中 span 方案最可靠，伪元素方案需手动控制位置与长度。
用 ::first-line 无法添加装饰线
::first-line 伪元素只支持有限的 CSS 属性，text-decoration（如下划线、删除线）**不在其中**。直接写 p::first-line { text-decoration: underline; } 完全无效，浏览器会静默忽略。
真正可行的方案：用 background-image 模拟首行下划线
核心思路是给段落设置一个从左开始、固定高度和位置的线性渐变背景，再配合 background-clip: text 和 -webkit-text-fill-color: transparent 把文字“镂空”出来，让背景线只在首行文字下方可见。但更稳妥、兼容性更好的做法是用绝对定位的伪元素：
- 给
p设置position: relative - 用
p::before绘制一条横线，定位在首行底部（需估算行高） - 通过
content: ""+width+height+background实现
p {
position: relative;
line-height: 1.6;
}
p::before {
content: "";
position: absolute;
left: 0;
bottom: calc(1.6em - 0.15em); /* 行高减去线粗，适配首行基线 */
width: 3em; /* 装饰线长度 */
height: 2px;
background: #007bff;
}
更灵活的方案：用
如果内容可控（比如 CMS 输出或手写 HTML），最可靠的方式是把首行文字单独包一层 ，然后直接加 text-decoration 或 border-bottom：
<p><span class="first-line-deco">这是首行文字</span>后面是第二行……</p>
.first-line-deco 可以这样写：
.first-line-deco {
text-decoration: underline;
text-decoration-color: #007bff;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
注意：text-underline-offset 和 text-decoration-thickness 在 Safari 旧版本中不支持，需要加 -webkit- 前缀或降级为 border-bottom。
为什么不用 text-indent 配合 border-bottom？
有人尝试给段落设 text-indent: 3em 再加 border-bottom，但这是错的——border-bottom 作用于整个块容器，不是首行；且 text-indent 只缩进第一行开头，不控制装饰范围。结果往往是整段底部一条线，或线位置漂移。
关键点始终是：CSS 没有原生“首行文本装饰”能力，必须靠定位、包裹或背景技巧绕过限制。最稳的是显式 ，最干净的是伪元素 + 绝对定位，但都要手动控制长度和垂直位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
