::first-line伪元素用于设置块级元素首行样式,语法为选择器后加::first-line,支持字体、颜色等属性,不支持边距尺寸,受容器宽度影响。

在CSS中,::first-line 伪元素可以用来选择一段文本中第一行的文字,并为其单独设置样式。要将它与CSS选择器结合使用,只需在任意有效的选择器后追加 ::first-line 即可。
基本语法结构
你可以将 ::first-line 添加到标签选择器、类选择器或ID选择器后面,以精确控制特定元素内首行文字的样式。
例如:- p::first-line { color: red; }
- .intro::first-line { font-weight: bold; }
- #title::first-line { font-size: 1.2em; }
实际应用场景
常见用途包括让段落首行加粗、变色或调整字体大小,增强排版视觉效果。
示例代码:
p.highlight::first-line {
color: #d63384;
font-weight: bold;
font-variant: small-caps;
}
上面的样式会作用于所有带有 highlight 类的段落,仅对第一行生效。
立即学习“前端免费学习笔记(深入)”;
注意事项
::first-line 只能应用于块级元素(如 div、p),不能用于行内元素(如 span)。它支持的属性包括字体、颜色、背景、文本对齐等,但不支持所有CSS属性,比如边距和尺寸类属性。
关键点:- 必须写在选择器之后,使用双冒号(也可用单冒号 :first-line,但推荐双冒号表示伪元素)
- 样式只作用于当前排版下第一行可见文字,受容器宽度影响
- 如果文本换行,只有真正显示在第一行的内容会被选中










