::after 单独无法显示提示气泡，因其默认不渲染（content 为空）且不响应鼠标事件；悬停必须作用于宿主元素，通过其 :hover 状态控制 ::after 的 content、定位与样式，同时需注意可访问性与溢出处理。
为什么 ::after 单独用无法显示提示气泡？
因为 ::after 默认不渲染（content 为空时），且它不能响应鼠标事件——悬停必须作用在宿主元素上，气泡只是“附着”出来的视觉层。常见错误是直接给 ::after 加 hover，这根本不会触发。
正确做法是：宿主元素（比如 button 或 span）监听 :hover，再通过该状态控制其 ::after 的 content、尺寸和定位。
-
content必须设为非空值（如"提示文字"或""配合背景色） -
position: relative要加在宿主元素上，否则::after的absolute定位会相对于最近的定位祖先，结果飘走 - 避免用
display: inline元素（如span）直接撑开::after的宽高——它默认不接受width/height，得先设display: inline-block或block
怎么让气泡带小三角并精确指向目标？
小三角本质是用 ::after 或 ::before 绘制一个旋转 45° 的正方形，再裁剪成三角形。关键不是“画三角”，而是让它和气泡主体对齐，并随宿主位置动态贴合。
典型结构是：气泡用 ::after，三角用 ::before；两者都绝对定位，共享同一 top/left 基准，再用 transform 微调偏移。
立即学习“前端免费学习笔记（深入）”；
- 三角常用写法：
content: ""+width: 8px; height: 8px;+background: #333;+transform: rotate(45deg) - 若气泡在宿主上方，三角应放在气泡底部居中：
bottom: -4px; left: 50%; transform: translateX(-50%) rotate(45deg) - 注意 z-index：三角必须和气泡同层或略低，否则会被遮住；宿主元素本身通常不需要设
z-index，除非父容器有层叠干扰
如何避免气泡被截断或错位？
最常出问题的是 overflow: hidden 父容器，或者 body 边界导致气泡一半消失。这不是 ::after 的错，而是定位脱离文档流后，溢出行为未被处理。
- 检查宿主父级是否设置了
overflow: hidden或overflow: auto—— 这会把绝对定位的伪元素直接裁掉 - 用
max-width和white-space: nowrap控制气泡宽度，防止长文本撑破布局 - 如果宿主靠近视口边缘（比如右边界），可用 JavaScript 动态切换气泡方向（顶部/右侧/左侧），但纯 CSS 方案只能预设 fallback：例如同时定义
top和bottom，用@supports (position: anchor)是未来方案，目前不实用 - 移动端点击触发时，需额外加
:focus-within或 JS 切换 class，因为:hover在触摸设备上不可靠
::after 气泡能替代 title 属性吗？
不能直接替代。原生 title 自动提供无障碍支持（屏幕阅读器读取）、延迟显示、跨浏览器一致性；而 ::after 气泡是纯视觉层，无语义、无键盘焦点支持、不被 AT（辅助技术）识别。
如果追求可访问性，必须额外加 aria-label 或 aria-describedby 关联真实 div 提示内容，且该 div 不能仅靠 ::after 实现——伪元素内容不会被读屏软件捕获。
- 仅靠
content: "xxx"的::after对屏幕阅读器完全不可见 - 想兼顾样式与可访问性，推荐结构：
<span aria-label="删除此项">✕</span><span class="tooltip-content" hidden>确认删除？</span>，再用 JS 或 CSS 控制显隐 - 性能上，大量使用
::after气泡不会卡顿，但每个都触发重排（尤其是含transform的），动画建议用opacity+transform而非top/left
伪元素气泡适合轻量、装饰性提示；一旦涉及操作确认、长说明、多语言或合规要求，就得回归真实 DOM 元素 + ARIA 组合。
