第三章 · 3.2 节

::first-line 与 ::first-letter

这两个伪元素专门服务于排版细节：前者作用于一个文本块渲染后的"第一行"，后者作用于文本内容的"第一个字符"。它们都是排版类伪元素，不接受 content 属性，样式也只能作用于可用属性子集。

::first-line

匹配的"第一行"是渲染结果，会随着容器宽度变化而重新计算，因此没有固定的字符数。

p.lead::first-line {
  font-weight: 700;
  color: #8a5a2e;
  letter-spacing: .02em;
}

效果预览

弹性布局自 2009 年提出以来，已成为一维排布中最优雅的解法，它以主轴与交叉轴为经纬。

匹配文本内容的首个字符（会跳过前导的标点与空白），常用于制作报刊排版中经典的"首字下沉"效果。

p.lead::first-letter {
  font-size: 2.4em;
  float: left;
  line-height: .8;
  padding-right: 6px;
  color: #8a5a2e;
}

效果预览

弹性布局自 2009 年提出以来，已成为一维排布中最优雅的解法，它以主轴与交叉轴为经纬，令元素的对齐与伸缩变得可预测。

本教程正文段落的首字下沉效果，正是用这一对伪元素实现的——你现在读到的每一节开篇，都在悄悄使用它。

由于这两个伪元素本质上是"排版级"而非"盒模型级"的概念，浏览器只允许对它们设置有限的一组属性：

伪元素	可用属性
::first-line	字体、颜色、背景、word-spacing、vertical-align 等文本相关属性
::first-letter	以上属性 + float、margin、padding、border（因为它可以表现为一个独立盒子）

注意设置 width / height 对 ::first-line 无效；::first-letter 只有在设置 float 或 display: inline-block 之后，宽高相关属性才会生效。