:hover + ::after 不生效，因为+是相邻兄弟选择器而::after是目标元素的内部伪元素，必须写成:hover::after；且content属性必不可少，移动端需用@media(hover: hover)或focus-within降级。
为什么 :hover + ::after 不生效？
因为 + 是相邻兄弟选择器，而 ::after 是伪元素，它不是真实 DOM 节点，也不在原元素的“兄弟”位置——它属于目标元素的内部内容。所以 .btn:hover + ::after 这种写法语法错误，浏览器直接忽略。
正确路径只有一条：伪元素必须依附于被悬停的元素本身，即用 .btn:hover::after。
-
::after必须和触发:hover的选择器作用在同一元素上 - 不能跨元素、不能用组合符（如
+、~）去“找”伪元素 - 若想影响其他元素再显示
::after，得换思路：比如把::after放在父容器里，或用 JS 控制类名
::after 在 :hover 下需要哪些必备样式？
伪元素默认不渲染，光写 .item:hover::after 是看不见的。必须显式声明 content，否则其他样式全无效。
-
content必须存在且非空，哪怕只是content: "" - 推荐加
display: block或inline-block以便设置宽高/定位 - 若用绝对定位，父元素需有
position: relative - 注意
z-index：伪元素默认层级和父元素文本一致，遮挡时需提升
.card {
position: relative;
}
.card:hover::after {
content: "→";
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
opacity: 0;
transition: opacity 0.2s;
}
.card:hover::after {
opacity: 1;
}
用 ::after 做下划线动画要注意什么？
这是高频场景，但容易卡在“动画不连贯”或“宽度不对”。根本原因是 ::after 默认宽度为 0，且无法直接继承文字宽度。
立即学习“前端免费学习笔记（深入）”；
- 别用
width: 100%—— 它继承的是父容器宽度，不是文字宽度 - 正确做法：设
width: 0初始态，hover时用width: max-content或配合left/right+transform - 更稳妥的是用
transform: scaleX(0)→scaleX(1)，避免重排 - 记得给父元素设
overflow: hidden防止缩放溢出
a {
position: relative;
padding-bottom: 4px;
}
a::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: #007bff;
transition: width 0.3s ease;
}
a:hover::after {
width: 100%;
}
移动端 hover 效果失效怎么办？
多数触摸设备不触发 :hover（iOS Safari 尤其典型），伪元素的 :hover 行为会完全跳过。这不是 bug，是规范行为。
- 不要依赖纯 CSS
:hover做关键交互，比如“悬停才显示操作按钮” - 可降级：用
:active模拟轻触反馈，或结合@media (hover: hover)条件启用 - 真正需要悬停态的场景（如工具提示），建议用
focus-within或 JS 监听touchstart后添加临时 class
例如兼容写法：
@media (hover: hover) {
.tooltip:hover::after {
opacity: 1;
}
}
.tooltip:focus-within::after,
.tooltip.active::after {
opacity: 1;
}
伪元素的 ::after 和 :hover 组合看似简单，但错一个属性（比如漏了 content）、错一个定位上下文（比如父元素没设 position），效果就彻底消失。最常被忽略的是：它不支持跨元素触发，也不在移动端可靠运行。 
