::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;
}更灵活的方案：用 <span></span> 显式包裹首行文本
如果内容可控（比如 CMS 输出或手写 HTML），最可靠的方式是把首行文字单独包一层 <span class="first-line-deco"></span>，然后直接加 text-decoration 或 border-bottom：
<p><span class="first-line-deco">这是首行文字</span>后面是第二行……</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10246" title="HTML Text Extract"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dee630206.jpg" alt="HTML Text Extract" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10246" title="HTML Text Extract">HTML Text Extract</a>
<p>从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。</p>
</div>
<a href="/xiazai/skill10246" title="HTML Text Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>.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 没有原生“首行文本装饰”能力，必须靠定位、包裹或背景技巧绕过限制。最稳的是显式 <span></span>，最干净的是伪元素 + 绝对定位，但都要手动控制长度和垂直位置。
