伪类和伪元素可连写如:hover::after，但需先定义::after并设置content才能生效；悬停仅控制显隐，须配合visibility/opacity及transition；移动端hover不可靠，无障碍和动态定位需js补充。
伪类和伪元素不能直接连写 :hover::after
很多人以为 :hover::after 是“悬停后触发 ::after”，其实它本身语法合法，但效果常不符合预期——因为 ::after 默认不占空间、无内容、不可见。真正要实现“悬停显示提示”，关键不是写法对不对，而是有没有给 ::after 赋予可渲染的属性。
-
::after必须声明content（哪怕只是content: ""）才能生成伪元素 - 仅写
:hover::after不会“新增”元素，只是在已有::after上修改样式（比如从opacity: 0变成1） - 如果父元素没设
position: relative，::after的绝对定位会相对于最近的定位祖先，容易飘走
正确写法：先定义 ::after，再用 :hover 控制显隐
必须把 ::after 的基础样式（位置、尺寸、内容）写在常态规则里，悬停只负责切换可见性或动画状态。常见可靠模式如下：
.tooltip {
position: relative;
}
.tooltip::after {
content: "这是提示文字";
position: absolute;
top: 120%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, visibility 0.2s;
}
.tooltip:hover::after {
opacity: 1;
visibility: visible;
}
-
visibility: hidden+opacity: 0配合使用，避免鼠标移入提示框时因透明导致触发不了 hover（纯opacity: 0仍响应事件） -
transition写在常态规则里，否则第一次悬停不会动效 - 如果提示内容含换行或复杂结构，
::after不适合，该用真实 DOM + JS 控制
为什么不用 :hover + ::after？加号是兄弟选择器，不适用
+ 是相邻兄弟选择器，要求两个元素是同级 DOM 兄弟关系。::after 不是真实元素，不可能和任何元素构成兄弟关系。所以 :hover + ::after 是无效语法，浏览器会直接忽略整条规则。
- 错误写法：
a:hover + ::after→ 解析失败，控制台可能报 warning - 正确逻辑链：元素自身悬停 → 修改其伪元素 → 用
&:hover::after（CSS 中）或.el:hover::after（实际书写） - 某些预处理器（如 Sass）里
&:hover::after是常见缩写，本质仍是同一个选择器主体的延伸
移动端兼容与交互陷阱
CSS :hover 在触摸设备上行为不一致：iOS Safari 只在点击后短暂触发一次，Android Chrome 可能完全不触发。单纯依赖 :hover::after 做提示，在手机端大概率失效。
立即学习“前端免费学习笔记（深入）”；
- 需要真·跨端提示时，应配合
touchstart事件加 class 切换，或改用title属性（原生、无样式但稳定） -
::after里的文字无法被屏幕阅读器读出，无障碍需额外加aria-label或aria-describedby - 若提示框需跟随鼠标移动（如 tooltip 跟随 cursor），
::after无法满足，必须用 JS 动态创建真实元素
content 缺失和 visibility/pointer-events 混用问题——看着代码全，悬停却没反应，八成卡在这两处。 
