使用::first-letter可突出段落首字母，实现首字下沉、放大、变色效果，结合float和字体设置提升视觉吸引力；使用::first-line可单独美化段落首行，常通过加粗、小型大写字母、变色等方式增强文本引导性与层次感；二者均需作用于块级元素，推荐使用双冒号语法，注意避免过度装饰影响可读性，且部分旧浏览器可能存在兼容性限制。合理应用能显著提升文章排版的专业性与美观度，同时不增加HTML结构负担。
使用 :first-letter 和 :first-line 伪元素可以有效提升段落的视觉表现力，让文本更具可读性和设计感。这两个选择器专门用于对段落中的首字母和首行进行样式定制，常用于杂志式排版或文章页面美化。
使用 :first-letter 突出首字母
:first-letter 作用于段落的第一个字符，适合做“首字下沉”或放大强调效果。
常见用法包括：- 设置较大的字体尺寸，使首字母更醒目
- 调整颜色，与整体文字形成对比
- 结合 float 实现首字下沉（drop cap）效果
- 增加行高或边距，优化排版空间
示例代码：
p::first-letter {
font-size: 2.5em;
font-weight: bold;
color: #d63384;
float: left;
line-height: 0.8;
margin-right: 0.1em;
}
这样会让每个段落的首字母变大并左浮动，形成经典的印刷风格。
立即学习“前端免费学习笔记（深入）”；
使用 :first-line 美化首行文本
:first-line 可以单独设置段落第一行的样式，适用于强调开头句子。
适用场景有：
- 将首行设为粗体或斜体，增强引导性
- 改变首行颜色，营造层次感
- 设置小型大写字母（small-caps）提升格调
- 配合字体族优化阅读体验
示例代码：
p::first-line {
font-weight: bold;
color: #495057;
font-variant: small-caps;
}
该样式会让段落第一行文字加粗、变色，并使用小型大写，显得更加正式优雅。
注意事项与兼容性
这两个伪元素必须配合块级元素使用（如 p、div），且推荐使用双冒号 :: 语法（CSS3 标准），以区别于伪类。
需要留意：- 只能应用于支持伪元素的块容器
- 不能与实际 DOM 元素混淆，无法通过 JavaScript 直接操作
- 部分旧浏览器可能限制样式属性的使用
- 避免过度装饰，影响可读性
基本上就这些。合理运用 ::first-letter 和 ::first-line，能让你的文章排版更专业，又不增加 HTML 结构负担。
