可通过CSS伪元素组合实现首字母装饰。1. 使用::first-letter设置首字母样式，如放大、变色、浮动；2. 利用::before在段落前添加引号或图标，并通过绝对定位与::first-letter配合；3. 结合content插入符号或字体图标作为前置装饰，调整位置避免重叠；4. 在文章首段应用此类样式，提升视觉层次与美观度。
在CSS中，想要为段落的首字母添加装饰效果（如放大、变色、边框、背景等），通常会使用 ::first-letter 伪元素。但需要注意的是，不能直接对 ::first-letter 使用 ::before，因为伪元素本身不支持再嵌套另一个伪元素。
不过，我们可以通过一些巧妙的结构和样式组合，实现类似“在首字母前添加装饰”的视觉效果。下面介绍几种实用方法。
1. 使用 ::first-letter 基础样式装饰首字母
这是最直接的方式，用于设置首字母的大小、颜色、字体等。
p::first-letter {
font-size: 2.5em;
font-weight: bold;
color: #d63384;
float: left;
margin-right: 0.1em;
line-height: 1;
}
这样可以让段落的第一个字母放大并左浮动，形成常见的“首字下沉”效果。
立即学习“前端免费学习笔记（深入）”；
2. 模拟 ::before 效果：用相对定位+伪元素包裹
由于 ::first-letter 不能结合 ::before，我们可以换一种思路：用HTML结构配合CSS来实现装饰。
示例HTML：
<p class="fancy-quote">这是一段文字的开始……</p>CSS实现：
.fancy-quote {
position: relative;
padding-left: 30px; /* 给装饰留空间 */
}
<p>.fancy-quote::before {
content: open-quote;
font-size: 2em;
color: #0d6efd;
position: absolute;
left: 0;
top: 0;
}</p><p>.fancy-quote::first-letter {
font-size: 2.5em;
font-weight: bold;
color: #d63384;
float: left;
margin-right: 0.1em;
}</p>这里，::before 添加了引号或图标作为装饰，而 ::first-letter 单独处理首字母样式，两者共存且互不干扰。
3. 使用字体图标或符号做前置装饰
如果你想在首字母前加一个图标或特殊符号，可以用 ::before 配合 content 属性。
.quote::first-letter {
font-size: 2em;
float: left;
margin-right: 5px;
}
<p>.quote::before {
content: "❝"; /<em> 引号或其他符号 </em>/
font-size: 1.5em;
color: #6c757d;
position: relative;
top: 0.5em;
left: -10px;
}</p>注意调整 position 或 transform 来精确定位装饰符号的位置，避免与首字母重叠。
4. 实际应用场景：文章首段美化
常见于博客或杂志类网站，提升可读性和美观度。
.article p:first-of-type::first-letter {
font-size: 3em;
font-family: 'Georgia', serif;
float: left;
line-height: 1;
margin-right: 0.05em;
color: #2c3e50;
}
<p>.article p:first-of-type::before {
content: "";
display: block;
width: 40px;
height: 2px;
background: #e74c3c;
position: relative;
top: 1.5em;
left: -45px;
}</p>这段代码为文章第一个段落的首字母添加了红色小横线装饰，增强视觉层次。
基本上就这些。虽然不能直接在 ::first-letter 上使用 ::before，但通过合理布局和伪元素分工，完全可以实现丰富的首字母装饰效果。
