第三章 · 3.2 节

::first-line 与 ::first-letter

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

::first-line

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

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

效果预览

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

::first-letter

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

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 之后，宽高相关属性才会生效。

Chapter 3 · Section 3.2

::first-line and ::first-letter

These two pseudo-elements serve typography details: the former applies to the "first line" of a rendered text block, and the latter to the "first character" of the text content. Both are typography-level pseudo-elements: they do not accept the content property, and styles are limited to a subset of allowed properties.

::first-line

The matched "first line" is a rendering result, recomputed as the container width changes, so it has no fixed number of characters.

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

Preview

Since flexbox was proposed in 2009, it has become the most elegant solution for one-dimensional layout, using the main axis and cross axis as its coordinates.

::first-letter

Matches the first character of the text content (skipping leading punctuation and whitespace), often used for the classic "drop cap" effect of newspaper typography.

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

In Practice: Drop Caps

Preview

Since flexbox was proposed in 2009, it has become the most elegant solution for one-dimensional layout: with the main axis and cross axis as its coordinates, the alignment and sizing of elements become predictable.

The drop cap at the start of this tutorial's body paragraphs is implemented with this very pair of pseudo-elements — every section opening you are reading quietly uses it.

Allowed Properties Are Limited

Because these two pseudo-elements are "typography-level" rather than "box-model-level" concepts, browsers only allow a limited set of properties on them:

Pseudo-element	Allowed properties
::first-line	Font, color, background, word-spacing, vertical-align and other text-related properties
::first-letter	All of the above plus float, margin, padding, border (because it can behave as an independent box)

NoteSetting width / height has no effect on ::first-line; for ::first-letter, width and height related properties only take effect after float or display: inline-block is set.