::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：

这是首行文字后面是第二行……

.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-deco

为什么不用 text-indent 配合 border-bottom？

有人尝试给段落设 text-indent: 3em 再加 border-bottom，但这是错的——border-bottom 作用于整个块容器，不是首行；且 text-indent 只缩进第一行开头，不控制装饰范围。结果往往是整段底部一条线，或线位置漂移。

关键点始终是：CSS 没有原生“首行文本装饰”能力，必须靠定位、包裹或背景技巧绕过限制。最稳的是显式 ，最干净的是伪元素 + 绝对定位，但都要手动控制长度和垂直位置。

# css  # html  # 伪元素  # cms  # 浏览器  # safari  # 绝对定位  # 为什么  # webkit  # class  # position  # border  # background  # 的是  # 这是  # 下划线  # 最可靠  # 都要  # 不支持  # 只在  # 再加  # 中不  # 一条线 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 百度浏览器如何管理插件 百度浏览器插件管理方法  如何在阿里云部署织梦网站？  uc浏览器二维码扫描入口_uc浏览器扫码功能使用地址  Bootstrap整体框架之JavaScript插件架构  如何用IIS7快速搭建并优化网站站点？  Laravel Octane如何提升性能_使用Laravel Octane加速你的应用  nodejs redis 发布订阅机制封装实现方法及实例代码  如何快速搭建FTP站点实现文件共享？  实例解析angularjs的filter过滤器  BootStrap整体框架之基础布局组件  利用vue写todolist单页应用  如何用手机制作网站和网页,手机移动端的网站能制作成中英双语的吗？  Laravel Eloquent关联是什么_Laravel模型一对一与一对多关系精讲  ChatGPT 4.0官网入口地址 ChatGPT在线体验官网  Thinkphp 中 distinct 的用法解析  如何挑选优质建站一级代理提升网站排名？  Laravel怎么发送邮件_Laravel Mail类SMTP配置教程  极客网站有哪些,DoNews、36氪、爱范儿、虎嗅、雷锋网、极客公园这些互联网媒体网站有什么差异？  简历在线制作网站免费版,如何创建个人简历？  如何自己制作一个网站链接,如何制作一个企业网站，建设网站的基本步骤有哪些？  JavaScript数据类型有哪些_如何准确判断一个变量的类型  如何快速搭建安全的FTP站点？  Laravel安装步骤详细教程_Laravel环境搭建指南  如何快速重置建站主机并恢复默认配置？  佛山企业网站制作公司有哪些,沟通100网上服务官网？  laravel怎么为API路由添加签名中间件保护_laravel API路由签名中间件保护方法  Windows家庭版如何开启组策略(gpedit.msc)？（安装方法）  网站制作软件免费下载安装,有哪些免费下载的软件网站？  Swift中循环语句中的转移语句 break 和 continue  如何快速搭建二级域名独立网站？  JS实现鼠标移上去显示图片或微信二维码  如何在IIS中配置站点IP、端口及主机头？  如何在建站之星网店版论坛获取技术支持？  Laravel任务队列怎么用_Laravel Queues异步处理任务提升应用性能  如何在腾讯云免费申请建站？  Laravel如何发送邮件和通知_Laravel邮件与通知系统发送步骤  java ZXing生成二维码及条码实例分享  详解MySQL数据库的安装与密码配置  高性能网站服务器配置指南：安全稳定与高效建站核心方案  Laravel怎么集成Log日志记录_Laravel单文件与每日日志配置及自定义通道【详解】  网站制作企业,网站的banner和导航栏是指什么？  如何快速搭建自助建站会员专属系统？  百度输入法ai组件怎么删除 百度输入法ai组件移除工具  laravel怎么使用数据库工厂（Factory）生成带有关联模型的数据_laravel Factory生成关联数据方法  Linux系统命令中tree命令详解  今日头条微视频如何找选题 今日头条微视频找选题技巧【指南】  Laravel怎么多语言本地化设置_Laravel语言包翻译与Locale动态切换【手册】  Laravel如何实现文件上传和存储？（本地与S3配置）  如何快速建站并高效导出源代码？  Laravel Admin后台管理框架推荐_Laravel快速开发后台工具