::first-letter与::first-line可分别为段落首字母和首行设置样式，通过增大字号、调整颜色、加粗字体等方式实现首字下沉与首行强调效果，结合letter-spacing、font-weight等属性提升排版视觉层次，常用于模拟杂志式设计，增强文章开头的可读性与美观度，且无需额外HTML标签，适用于块级元素，现代浏览器支持良好。
在网页排版中，使用CSS伪元素可以为文本内容添加精致的视觉效果。::first-letter与::first-line是两个常用的伪元素，它们能分别选中块级元素中的首个字母和第一行文本，结合文本装饰属性，可实现优雅的排版样式。
::first-letter 基础用法
::first-letter用于设置段落首字母的样式，常用于模拟“首字下沉”效果，增强文章开头的可读性和美观度。
常见应用包括：- 增大首字母字号
- 设置不同的颜色或背景
- 调整字体粗细或字体族
- 实现下沉或上浮布局
示例：
p::first-letter {
font-size: 2.5em;
float: left;
line-height: 0.8;
margin-right: 0.1em;
color: #d44;
font-weight: bold;
}
::first-line 基础用法
::first-line作用于段落的第一行文本，适合用于强调段落起始部分的整体视觉风格。
立即学习“前端免费学习笔记（深入）”；
典型用途有：
- 设置第一行的字体颜色
- 加粗或斜体显示
- 控制文字间距或大小写
示例：
p::first-line {
font-weight: bold;
color: #333;
letter-spacing: 0.05em;
}
结合文本装饰提升视觉层次
将::first-letter与::first-line联合使用，可以让段落开头更具设计感，形成清晰的阅读引导。
实际场景示例：- 首字母放大并下沉，第一行加粗并微调字距
- 首字母使用特殊字体，第一行设置浅色背景突出
- 配合引号装饰与行高优化，营造出版级排版效果
综合样式示例：
p {
text-indent: 0.5em;
line-height: 1.6;
}
p::first-letter {
font-size: 2.8em;
float: left;
line-height: 0.9;
margin-right: 0.1em;
color: #a00;
font-family: 'Georgia', serif;
}
p::first-line {
font-weight: 600;
color: #444;
letter-spacing: 0.03em;
}
基本上就这些。合理使用这两个伪元素，再搭配合适的文本装饰属性，能让普通段落立刻拥有杂志般的排版质感，且无需额外HTML标签，保持语义清洁。注意兼容性良好，现代浏览器均支持，但在内联元素上无效，需确保应用于块级容器。
