::first-line 的 background-color 高亮需满足块级容器、无干扰布局、首行不截断三条件；其失效主因是行盒断裂或高度压缩，并非浏览器 Bug。
::first-line 本身不支持“高亮”语义的 background-color 全行稳定填充，但可以模拟——前提是满足块级容器、无干扰布局、首行不被截断三个硬条件。
为什么 ::first-line 加 background-color 经常只亮半截或完全没反应
根本不是浏览器 Bug，而是渲染机制决定的：::first-line 选中的是“行盒（line box）”的第一行内容区域，一旦该行内存在 inline-block、float、vertical-align: middle 或换行符位置异常，行盒就会断裂，背景色只能覆盖连续文本段。更隐蔽的是：如果父元素用了 font-size: 0 或 line-height: 0.5，行盒高度被压缩，background-color 可能被裁掉上/下边缘。
- 检查 DevTools 的 Elements 面板，确认目标元素 computed
display确实是block（不是flex、grid或被 JS 动态改写） - 用
white-space: normal重置，避免nowrap或pre干扰折行逻辑 - 删掉首行前所有空格、
\u200B（零宽空格），这些字符会让浏览器把“视觉首行”判定偏移
::first-line 中 background-color 能用，但有前提
它不是“不能用”，而是对上下文极其敏感。相比 color 或 font-weight 这类必生效属性，background-color 的渲染依赖行盒是否完整闭合。Safari 对它的支持最宽松，Firefox 最保守，Chrome 居中。
- 必须确保整行无浮动、无绝对定位子元素、无
inline-flex子项 - 避免和
::first-letter共用同一选择器——后者会生成独立匿名行盒，导致背景色在首字母处中断 - 若需可靠高亮，优先用
color: #fff; background-color: #2c3e50;组合，比单设背景更稳 - 不要设
padding或border想“撑开”背景——它们会被忽略，白写
响应式下首行高亮“跳来跳去”的真实原因
它不是失效，是按设计工作：视口缩放 → 折行点变化 → 浏览器重新计算哪几个字符属于“第一行” → ::first-line 样式自动套用到新范围。所以桌面端高亮前 12 个字，手机端可能只高亮前 4 个字，甚至高亮到第二句开头。
立即学习“前端免费学习笔记（深入）”；
- 这不是 bug，是规范要求的行为；别试图用媒体查询“固定”首行字数
- 如果内容结构固定（比如小说每段固定 80 字），可改用
span手动包裹首行文字，彻底绕过伪元素动态性 - 用
text-indent缩进时，高亮区域包含缩进空白，但背景色不会延伸到缩进外——这是正常表现，不是漏样式
替代方案：什么时候该放弃 ::first-line 改手动标记
当出现以下任一情况，硬扛 ::first-line 会浪费大量调试时间：
- 段落由 JS 动态注入，且首行样式未随内容更新（
::first-line不监听 DOM 变化） - 首行含图标字体、
sup上标、或混排 emoji，导致行盒高度不一致，背景色错位 - 需要首行带圆角、阴影、或与后续行有不同
line-height（伪元素无法单独控制行高差异） - 团队协作项目里，设计师要求“首行必须精确高亮前 15 字符”，而你无法控制用户缩放或字体加载时机
这时候直接在 HTML 里用 <span class="lead-line">... 包住首行文字，CSS 写 .lead-line { background-color: #e3f2fd; }，反而更快更可控。
