伪类和伪元素不能像函数调用一样连写，但可合法组合为:hover::after表示悬停时渲染伪元素；必须设置content（非none或空值）且父元素需position: relative以支持position: absolute定位；移动端hover不可靠，应配合媒体查询或JS降级。
伪类和伪元素能直接连写吗
不能。:hover 是伪类，::after 是伪元素，CSS 中不允许把它们像函数调用一样“串联”成 :hover::after 这种写法——但可以组合使用，关键在于**选择器结构要合法**。
正确写法是：先选中目标元素，再在其上同时应用 :hover 和 ::after，即用 :hover::after 作为整个选择器（注意中间没有空格）。这表示“当该元素处于悬停状态时，渲染其 ::after 伪元素”。
常见错误：.tip:hover .tooltip::after（带空格）会匹配子元素，而不是当前元素的伪元素；想控制自身悬停后的提示，必须去掉空格。
:hover::after 必须配合 content 才生效
::after 默认不渲染，哪怕写了样式也看不见——content 属性是硬性前提，且不能为 none 或空字符串（"" 是合法的，但得有引号）。
实操建议：
- 提示文字用
content: "提示内容";，中文需加引号 - 图标类提示可用
content: "\e901";（对应字体图标 Unicode） - 纯装饰（如小三角）可写
content: "";，但必须存在 - 漏写
content是悬停无反应的最常见原因
定位提示框需要脱离文档流
默认 ::after 是行内级，无法自由定位。要实现气泡、上标、右偏移等提示效果，必须设 position: absolute，并让父元素有定位上下文（即父元素设 position: relative）。
典型结构和关键样式：
.trigger {
position: relative;
}
.trigger:hover::after {
content: "这是提示";
position: absolute;
top: -30px; /* 向上偏移 */
left: 50%;
transform: translateX(-50%); /* 水平居中 */
background: #333;
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
}注意：top/left 值依赖父元素尺寸，响应式场景下容易错位；若父元素本身是 inline 元素（如 <span></span>），需先加 display: inline-block 再设 relative，否则 absolute 定位可能失效。
移动端 hover 不可靠，别只靠它
在触摸设备上，:hover 触发逻辑不一致：有些浏览器模拟一次点击后触发，有些根本不触发。仅用 :hover::after 做提示，在 iPad 或安卓 Chrome 上大概率失效。
稳妥方案：
- 用
@media (hover: hover) and (pointer: fine)包裹 hover 样式，排除触屏设备 - 对移动端改用 JS 控制 class（如
.is-hovered），再写.trigger.is-hovered::after - 或直接放弃纯 CSS 方案，改用
title属性兜底（虽然样式不可控）
真正上线的提示组件，hover 只是锦上添花，核心交互逻辑不该依赖它。
