如何通过::first-line伪元素在HTML中定制首行文本样式？

本文共计903个文字，预计阅读时间需要4分钟。

first-line 属性只对块级元素生效，且仅支持有限的 CSS 属性。使用时，请注意选择合适的属性，避免错误选择器或嵌套使用。

必须用块级元素包裹文本

浏览器只会在渲染完成、文本自动换行后，才识别哪一行是“第一行”。这个过程依赖块格式化上下文（BFC），所以 ::first-line 只能作用于 <p>、<div>、<section> 等默认 display: block 的元素。

常见错误包括：

• 给 <span class="intro">... 加 .intro::first-line —— 无效，因为 <span> 是内联元素
• 用 display: inline 强制改写块元素 —— 会直接让 ::first-line 失效
• 内容为空或只有空白符（如全空格、<br>）—— 浏览器无法计算首行，样式不触发

可用属性比你想象中少得多

::first-line 不是普通选择器，它受规范严格限制。以下属性可安全使用：

立即学习“前端免费学习笔记（深入）”；

• font、font-size、font-weight、line-height、text-transform
• color、background-color、text-decoration
• letter-spacing、word-spacing、vertical-align

这些属性不可用：

• margin / padding —— 会静默忽略
• width / height / position —— 不起作用
• border —— 即使写了也不会渲染
• display —— 设置为 inline-block 或 flex 会破坏伪元素逻辑

双冒号写法 (::first-line) 是现代标准，但单冒号 (:first-line) 仍被广泛支持

从 CSS2 开始就允许用单冒号写法，CSS3 明确区分伪类（:hover）和伪元素（::first-line），推荐用双冒号以示语义清晰。但实际项目中，两种都可工作：

p::first-line { color: #2c3e50; font-weight: 600; }

注意：不要混用，比如 p:first-line 和 p::first-letter 同时存在时，部分旧版 Safari 对解析顺序敏感，建议统一风格。

动态内容下首行可能“漂移”，需留意重排行为

当文本通过 JS 插入、字体加载完成、或窗口 resize 导致换行位置变化时，::first-line 会重新计算并应用样式——这是它的优势，但也带来隐患：

• 如果首行刚好卡在断字边界（如英文连字符、CJK 字间空隙），不同浏览器可能切分不同
• 配合 font-feature-settings 或自定义字体时，首行字符数可能意外变化
• 用 text-indent 缩进首行时，::first-line 样式仍作用于视觉首行，但缩进本身不属于该伪元素控制范围

最易被忽略的一点：当段落里嵌了 <img> 或 <em> 这类内联元素，且它们恰好出现在首行末尾，::first-line 仍只作用于文字部分，不会影响这些元素的样式——它真真正正只管“第一行的纯文本”。