first-letter伪元素不生效的常见原因
直接写 ::first-letter 却没反应，大概率是元素类型或内容结构不满足触发条件。它只对「块级容器」里的「第一个文字字符」生效，inline 元素（比如 <span>）、空格/换行开头、首字符被其他标签包裹（如 <em>你好</em>），都会让伪元素失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保目标元素是
display: block或inline-block（默认<p>、<h2>都符合） - 首字符前不能有空白字符或注释；HTML里别写成
<p> 标题</p> - 避免首字被
<span>、<strong>等内联标签包住——浏览器认为“第一个字符”不在文本流顶层 - 中文标题也能用，但注意：标点（如《、【）也算“第一个字符”，要下沉就得把它一起包含进去
放大首字后文字错位或行高异常
单纯设 font-size: 3em 很容易撑开整行高度，导致后续文字下移、上下行距不均。这不是 bug，是 ::first-letter 默认继承父元素的 line-height，而大字号又按比例拉高了行框。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 显式重置
line-height，比如设为line-height: 1或具体数值（如1.2），避免继承放大后的值 - 配合
float: left实现传统“首字下沉”效果（文字环绕），此时需额外控制宽度和边距，否则可能挤占后续文字空间 - 慎用
vertical-align：在inline上下文中它行为不稳定，优先用margin-top或transform: translateY()微调垂直位置
兼容性与 CSS 层叠中的隐藏陷阱
::first-letter 在所有现代浏览器都支持，但 IE 中仅支持单冒号写法 :first-letter；更麻烦的是，它会和父元素的字体设置、颜色、甚至 text-transform 发生不可见的层叠冲突。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须单独声明
color和font-family，否则可能沿用父级设置（比如父级用了text-transform: uppercase，首字也会被转大写） - 不要依赖继承：即使父级写了
font-weight: bold，::first-letter仍可能显示为 normal，得显式写font-weight: bold - 移动端 Safari 对
float + ::first-letter的组合渲染偶有偏移，加overflow: hidden到父容器可缓解
中文标题首字下沉的实用写法示例
直接套用下面这段，能避开大多数排版断裂问题：
h2 {
line-height: 1.6;
}
h2::first-letter {
font-size: 4em;
line-height: 0.8;
font-weight: bold;
float: left;
margin-right: 0.2em;
margin-top: 0.1em;
}
注意：line-height: 0.8 是关键，它压缩首字自身行高，避免把整行顶高；float: left 让后续文字自然环绕——如果不想环绕，就去掉 float，改用 display: inline-block + vertical-align: top 对齐。
真正难的不是写出来，而是每次换字体、换字号、加图标时，都要重新调 margin 和 line-height。这些数值没有通用解，得看实际渲染结果微调。
