::first-line伪元素仅作用于块级元素首行,支持字体、颜色、文本装饰等有限样式,text-indent需设在元素本身而非伪元素内。

用 ::first-line 伪元素可以单独设置段落首行的样式,比如首行缩进、变色、加粗等。它只作用于块级元素(如 p、div)的第一行文本,且仅支持部分 CSS 属性。
支持的常用样式属性
::first-line 允许设置的样式有限,主要包括:
- 字体相关:
font-size、font-weight、font-family、font-style - 颜色与背景:
color、background-color - 文本装饰:
text-decoration、text-transform、letter-spacing - 行高与对齐:
line-height、text-align(注意:text-align在某些浏览器中可能不生效)
典型用法:首行缩进 + 样式强化
中文排版常需首行缩进两个字符,同时让首行更醒目:
p::first-line {
text-indent: 2em;
font-weight: bold;
color: #2c3e50;
}
⚠️ 注意:text-indent 虽常用于段落首行缩进,但它**不属于 ::first-line 支持的属性**,应直接写在 p 上;::first-line 里只能设它支持的样式,比如加粗或变色。
立即学习“前端免费学习笔记(深入)”;
实际应用注意事项
使用时容易踩坑,需留意以下几点:
-
::first-line只匹配渲染后的第一行——如果段落宽度变化(如响应式布局),首行内容变动,样式会自动重算 - 不能设置
width、height、margin、padding、border等盒模型属性 - 嵌套元素(如
span、strong)内的样式会覆盖::first-line,优先级更高 - 建议用双冒号
::first-line(现代标准),单冒号:first-line为旧写法,虽仍兼容但不推荐
不复杂但容易忽略细节,按规范写就能稳定生效。










