图片上hover用::after无效是因为img是替换元素，不支持伪元素；需外包容器并设position:relative，::after用absolute定位+opacity过渡防闪动，注意兼容性与字体回退。
hover时用::after显示文字说明，为什么图片上没效果
因为 ::after 默认不能作用在 <img> 上——<img> 是替换元素（replaced element），不支持伪元素。必须包一层容器（比如 <div> 或 <code><span></span>），再对容器设 :hover 和 ::after。
- 错误写法：
img:hover::after { content: "说明"; }→ 完全无效 - 正确结构：用
<div class="img-wrap"><img src="..."></div>，然后给.img-wrap:hover::after加样式 - 别忘了给容器设
position: relative，否则::after无法用absolute精确定位到图片上
文字说明盖不住图片，或位置偏移严重
常见原因是 ::after 默认是行内级，且未脱离文档流前会受父容器内联布局影响；叠加时若没控制尺寸、定位和层级，就容易错位或被裁切。
- 必须加
position: absolute和z-index（比如z-index: 1）确保文字在最上层 - 推荐用
top: 0; left: 0; width: 100%; height: 100%铺满容器，再用display: flex居中文字，比纯top: 50%; transform: translateY(-50%)更稳 - 如果图片有
border-radius或object-fit: cover，::after不会自动跟随裁剪，需在容器上统一设圆角，并加overflow: hidden
文字说明闪动、hover一进一出就反复触发
这是由于鼠标移入图片区域时，::after 元素突然出现，导致鼠标实际移入了新元素，又触发 :hover 离开原容器，形成“离开→重绘→进入→再离开”的循环。
- 解决方案：给容器加
transition: opacity 0.2s，同时让::after始终存在（opacity: 0），只在 hover 时改opacity: 1 - 不要用
display: none/block控制显隐——它会彻底移除元素，必然引发重排和闪动 - 如果容器内还有其他可交互元素（如链接），建议把
::after的pointer-events: none，避免遮挡点击
IE11 或旧版 Safari 下 ::after 文字不显示
::after 本身兼容性很好，但问题常出在现代 CSS 特性上——比如用了 flex 居中、rgba() 背景色，或 content 里写了 Unicode 符号却没设字体支持。
- IE11 不支持
content中的attr(data-title)动态取值，只能写死文本，或改用 JS 注入 - 旧 Safari 对
position: absolute在inline容器里的表现不稳定，建议容器设display: inline-block或block - 如果文字用了非系统字体（如
font-family: "PingFang SC"），IE 可能回退失败，加个通用字体栈更稳妥：font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
top 值更省时间。
