:hover 下 ::first-letter 无效是因为其宿主元素需为块级容器（如 display: block/inline-block），而 、 默认 inline；解决方法是设 display: inline-block，并确保内容非空、样式无干扰。
当在 :hover 状态下为元素设置 ::first-letter 伪元素样式却无效时，常见原因是该元素默认为行内级（如 、），而 ::first-letter 只对**块级容器**生效 —— 它需要能形成独立的块格式化上下文（BFC）并拥有明确的布局边界。
为什么 hover + ::first-letter 不生效？
::first-letter 是一个“首字母”装饰性伪元素，浏览器要求其宿主元素必须满足：
– 是块级容器（display: block、table-cell、list-item 等）
– 不能是纯行内元素（如 display: inline）
– 且需有可渲染的文本内容（非空、未被 visibility: hidden 或 font-size: 0 破坏）
若宿主是 或 ，默认 display: inline，即使加了 :hover::first-letter 也不会触发渲染。
用 display: inline-block 解决（推荐）
inline-block 是最轻量、兼容性好、不影响文档流的方案：它既保留行内布局特性（不换行、可与其他行内元素共存），又满足 ::first-letter 所需的块级容器条件。
- 给目标元素显式设置
display: inline-block - 确保 hover 选择器层级正确，例如：
a:hover::first-letter { font-size: 1.4em; color: #e74c3c; } - 避免同时设置
line-height: 0、font-size: 0或overflow: hidden等可能干扰首字母定位的属性
其他可行替代方案
-
改为
display: block：适合可独占一行的场景，但会破坏原有行内布局 -
包裹一层
并设为inline-block：不修改原标签语义，适合无法改写 HTML 的情况 -
使用
display: table-cell：兼容性略低（IE8+），但也能触发::first-letter，适合需要垂直居中的场合
检查是否还有干扰项
即使设置了 inline-block，以下情况仍可能导致失效：
立即学习“前端免费学习笔记（深入）”；
- 元素内容为空，或首字符是空格、换行符、标点（
::first-letter只匹配第一个字母或数字） - CSS 优先级不足，被其他规则覆盖（可用浏览器开发者工具检查“Computed”面板确认是否应用）
- 父元素设置了
font-size: 0或letter-spacing过大，导致首字母位置异常