:hover 和 ::after 必须作用于同一元素才生效；若需父级 hover 触发子元素伪元素，应写为 .parent:hover .child::after，并确保 DOM 结构匹配、子元素支持伪元素且样式未被覆盖或裁剪。
hover 选择器和 ::after 必须在同一元素上才能生效
很多人写 .btn:hover::after 发现没反应，其实不是伪元素坏了，而是误以为 hover 状态能“穿透”到子元素的伪元素上。实际上，::after 是挂载在目标元素自身渲染流里的，它和 :hover 共享同一个宿主元素。如果你写的是 .parent:hover .child::after，那只有当鼠标真正在 .child 上时，.parent:hover 才可能触发（取决于是否满足冒泡/包含关系），但更常见的是想让父级 hover 时子级伪元素显示——这时必须确保选择器路径能真正匹配到那个带 ::after 的元素。
检查 DOM 结构是否允许父 hover 触发子伪元素
如果目标是「鼠标悬停父容器时，子元素的 ::after 显示」，关键不在伪元素本身，而在选择器能否定位到那个子元素。例如：
.card:hover .icon::after { content: "→"; opacity: 1; }
这个写法完全合法，前提是 .icon 确实是 .card 的后代（任意层级），且 .icon 元素本身支持 ::after（即不是 <img alt="css:hover + ::after伪元素交互效果不生效_检查父子关系和选择器" >、<input> 等替换元素）。容易踩的坑包括：
-
.icon实际是空标签（如<span class="icon"></span>），但没设display: inline-block或display: block，导致::after不渲染 - 父容器用了
overflow: hidden，而::after偏移出界后被裁剪，看起来像“没生效” - CSS 优先级被其他规则覆盖，比如有更具体的
.icon::after { content: none; } - 伪元素设置了
content: ""但没配尺寸或背景，视觉上不可见
用开发者工具快速验证 ::after 是否被生成
在 Chrome/Firefox 的 Elements 面板中，鼠标悬停父元素后，右键点击子元素 → “Edit as HTML”，看 DOM 树里有没有出现 ::after 节点（它不会出现在真实 HTML 中，但在 Styles 面板的伪类过滤器里会显式列出）。如果 Styles 面板里压根不显示 ::after 的样式块，说明选择器根本没匹配上；如果显示了但属性灰掉，大概率是被更高优先级规则覆盖或值非法（比如 content 为空且无其他可视属性）。
立即学习“前端免费学习笔记（深入）”；
此时可临时加一条强制调试样式：
.icon:hover::after { content: "DEBUG"; background: red; color: white; }
再测试 —— 如果这时出现了，说明原逻辑里 content 或视觉属性配置有问题；如果仍不出现，就是选择器路径或 DOM 层级不对。
替代方案：用 visibility / opacity + transition 控制显隐更可控
直接依赖 :hover 触发 ::after 的 content 切换，容易因重排或渲染时机问题显得卡顿。更稳妥的做法是预先定义好 ::after，只控制它的显隐状态：
.icon::after {
content: "→";
opacity: 0;
transition: opacity 0.2s;
}
.icon:hover::after {
opacity: 1;
}
这样避免了每次 hover 都要创建/销毁伪元素内容，也绕开了某些浏览器对动态 content 值的兼容性限制（比如旧版 Safari 对 attr() 在 hover 中更新的支持不稳定）。
真正复杂的地方往往不在语法，而在你写的那个“父”是不是真的能 hover 到、“子”是不是真的能挂载伪元素、以及开发者工具里看到的“没效果”，到底是没渲染、被裁剪、还是被覆盖。盯着 Elements 和 Styles 面板里的实时反馈比反复改 CSS 更快。
