CSS伪元素::first-letter和::first-line如何美化段落排版

在CSS排版中，段落的第一印象往往决定了整篇文章的阅读气质。::first-letter和::first-line作为CSS规范内置的伪元素，恰好能够在不修改HTML结构的前提下，为段落的“开头”赋予独特的视觉节奏。前者用于精确定位块级容器内的第一个字符，后者则锚定首行的整行内容。两者都只能作用于块级元素（display值为block、inline-block、list-item等），并且对CSS属性有明确的白名单限制，理解这一底层约束是掌握它们的关键。

认识::first-letter与::first-line的差异

::first-letter和::first-line虽然命名相似，作用范围却截然不同。::first-letter指的是元素内首个排版字符，这里的“字符”遵循字符簇概念，一个复合字形（如带声调字母或emoji）会被视为一个整体。实际渲染时，该伪元素会生成一个独立的盒子，可以理解成浏览器在这个字符周围包裹了一层不可见的inline元素。

::first-line则复杂得多，它选取的是当前容器在当前视口宽度下排版出的第一行文本。第一行的边界取决于字体大小、容器宽度、缩放比例等多种因素，具有明显的动态性。也就是说，同一段文字在窄屏和宽屏下，::first-line覆盖的内容可能完全不同。这一点与::before、::after等其他伪元素有本质区别，后者不依赖布局结果。

两个伪元素在可应用属性上也有明显差异。::first-letter支持绝大多数文本与盒子相关属性，例如font、color、background、padding、border、margin、float等。而::first-line只支持font、color、background族、word-spacing、letter-spacing、text-decoration、text-shadow等文本相关属性，不支持float和margin。举例来说，给首行添加一个整体的背景色块可以直接写成：

.article-intro::first-line {
  background-color: #f5f0e8;
  font-size: 1.1em;
  color: #4a3f35;
}

但若试图对::first-line使用padding或border，浏览器会静默忽略，不报错也不生效：

.article-intro::first-line {
  /* 以下两行会被浏览器忽略 */
  padding: 10px;
  border-bottom: 2px solid #c00;
}

用::first-letter实现杂志风格的首字下沉

首字下沉是报刊和杂志中最常见的排版手法之一。通过让段落的第一个字符放大并浮动到左侧，能在视觉上强制引导视线进入正文。经典的实现方式是float加字体缩放：

.drop-cap::first-letter {
  float: left;
  font-size: 3.2em;
  line-height: 0.8;
  padding-right: 8px;
  font-weight: bold;
  color: #7b2d26;
}

这里的line-height需要刻意设置为小于1，才能避免放大后的字符把段落整体高度撑开。float让首字符形成一个独立的浮动盒子，后续文字会自然环绕在右侧，形成典型的“下沉”效果。如果希望首字符以两种颜色叠加呈现，例如字符本色为白色而背景使用渐变色块，可以借助background-clip:text配合透明颜色，但要注意这种写法在部分浏览器上要求同时设置-webkit-text-fill-color:transparent。

另一种思路是把首字符设计成带边框的徽章样式。因为::first-letter支持border和margin，可以轻松做出矩形衬底的字首：

.badge-first::first-letter {
  display: inline-block;
  padding: 6px 12px;
  margin-right: 6px;
  background: #2c3e50;
  color: #fff;
  font-size: 2rem;
  border-radius: 4px;
}

需要留意的是，当::first-letter使用了display:inline-block后，原有的换行规则会有细微变化，但视觉上更可控。实际项目中如果段落开头是引号，引号也会被当作首字符参与计算，这在某些排版需求下需要额外处理。

用::first-line强化首行视觉层次

首行强调在长文阅读场景中非常实用。例如在文章导语部分，把第一行放大加粗，能瞬间告诉读者“从这里开始读”。这是一个轻量级的交互引导，不需要改动任何HTML结构：

.lead-paragraph::first-line {
  font-weight: 700;
  font-size: 1.15em;
  color: #1e3a5f;
  letter-spacing: 0.02em;
}

除了文字属性，::first-line还允许设置文本装饰和阴影，让首行获得下划线或柔光效果。配合::first-letter使用，可以同时实现首字下沉和首行加粗，形成视觉上的双强调结构。在新闻资讯类页面中，这种组合能有效提升阅读起始位置的辨识度。

不过，::first-line有一个显著的坑：它不能响应未发生换行的内容。如果段落的文本很简短，没有在容器内换行，那么::first-line实际选中的就是全部文本；反过来，如果首行被float元素挤压得只剩几个字，选中的也就只有这几个字。这意味着效果在不同屏幕宽度下可能超出设计预期，测试时要特别关注中间尺寸的视口。

编写样式时可以把::first-letter和::first-line的规则拆开写，避免首字浮动影响首行的测量结果。因为当首字符浮动后，它脱离正常的行盒排列，首行剩余文本会围绕它，首行的高度可能变化，进而影响::first-line的选取范围，这是一个容易被忽视的联动关系：

.lead-para::first-letter {
  float: left;
  font-size: 3em;
  line-height: 0.85;
}

.lead-para::first-line {
  font-weight: 600;
}

兼容性细节与排版避坑指南

从浏览器兼容性看，::first-letter和::first-line在Chrome、Firefox、Safari、Edge以及IE9以上的表现基本稳定，但有几处细节值得验证。首先是伪元素双冒号写法：IE8及更早版本只支持单冒号形式:first-letter，现代浏览器普遍支持双冒号，建议在兼顾旧环境时同时写两行规则。

其次要注意中文字符的换行规则。中文场景下，首字符如果是全角引号或书名号，部分浏览器会将其与后续字符视为一个整体，导致::first-letter选中了多个字符。规避方案是在HTML结构中将引号用额外的span包裹起来，使伪元素真正落在内容字符上：

<p class="drop-cap"><span>“</span>我们身处一个信息过载的时代……</p>

这样CSS选择器便不会把引号当作第一字符参与计算，视觉上也能让首字下沉效果落在真正的汉字上。

另一个容易被忽略的问题是子元素对::first-line的干扰。当段落内部嵌套了inline元素，比如<span>或者<em>，::first-line的样式会覆盖子元素中的部分同名属性，但子元素自身的样式依然享有更高优先级。也就是说，如果子元素明确设置了color，那么首行最终呈现的颜色可能不是::first-line中定义的值，而是子元素的值。这种现象源于层叠规则，写代码时应把::first-line理解为作用于元素自身文本层级的样式，而不是一个位于所有子元素之上的终极封装层。

如果需要让::first-letter支持自定义字体、渐变色或复杂纹理背景，可以结合@font-face引入与正文不同的字体，让首字符使用一款更具装饰性的字体。实现方式很简单，直接在::first-letter的规则中声明font-family即可。灵活运用这两个伪元素，配合现代CSS的颜色和背景能力，用极少的代码就能完成高质量的段落视觉效果。

first-letter伪元素first-line伪元素CSS排版美化修改时间：2026-08-23 06:47:54