::first-line 伪元素用于设置块级元素首行文本样式,支持 color、font-weight、font-size 等文本属性,常用于段落首行美化,如加粗、变色、放大等效果。
在CSS中,::first-line 伪元素用于选中块级元素中的第一行文本,并为其设置独立的样式。这个选择器常用于美化段落的首行,比如在文章排版中实现首行缩进、字体加粗或颜色变化等视觉效果。
基本语法
p::first-line { property: value; }该伪元素只能应用于**块级元素**(如 div、p、h1-h6 等),不能用于内联元素(如 span)。
可设置的常见样式属性
::first-line 支持部分CSS文本样式属性,包括:
- color:改变首行文字颜色
- font-weight:设置是否加粗
- font-style:设置斜体
- text-transform:控制大小写转换
- text-decoration:添加下划线、删除线等
- letter-spacing:调整字符间距
- text-shadow:添加文字阴影
- font-size:修改字号
注意:不能使用所有CSS属性,例如 margin、padding、background-image 虽然部分背景相关属性可用,但行为可能受限制。
实际应用示例
p::first-line { color: #d63384; font-weight: bold; font-size: 1.2em; text-transform: uppercase; }上面代码会让每个 p 段落的首行文字变成粉色、加粗、放大并转为大
写,适用于强调文章开头。
注意事项
首行的范围由当前布局和字体大小决定,会随浏览器窗口尺寸变化而变化。例如,当用户调整浏览器宽度导致换行位置改变时,::first-line 匹配的文本内容也会动态变化。
另外,::first-line 是CSS2引入的伪元素,建议使用双冒号写法以区别于伪类(如 :hover)。虽然单冒号 :first-line 在旧版本中也有效,但推荐使用现代标准写法。








