气泡提示伪元素选::before或::after均可，但需设content: ""；定位须父容器加position: relative；三角用border技巧实现，方向由非透明边决定；移动端错位应改用touchend触发或强制重排。
气泡提示用 ::before 还是 ::after？选哪个不重要，关键是定位锚点
伪元素本身没有尺寸，必须显式设置 content: "" 才能渲染。气泡三角通常用 ::before 画，文字内容放主元素里，这样结构清晰、便于控制层级。但如果你要叠加两层装饰（比如外阴影+内三角），::after 也能用——只要记住：两个伪元素默认都相对于同一个父容器定位，别指望它们自动“套娃”。
position: absolute 的参照物必须是 position: relative 的父容器
直接给提示元素设 position: absolute，它会往上找最近的「已定位祖先」。如果没找到，就相对于 定位，结果气泡飘到页面左上角。所以必须在包裹提示文字的容器上加 position: relative，哪怕它只是个 <span></span> 或 <div>。<ul>
<li>错误写法：<code>.tooltip { position: absolute; }，而父元素没设定位
.tooltip-wrapper {
position: relative;
}
.tooltip {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
}left: 50% + transform: translateX(-50%)，不是靠 margin-left
三角形怎么用伪元素画？border 技巧不能少
最轻量的方式是用 border 拼：把宽高设为 0，只留一个方向的 border 有颜色和宽度，其余设为 transparent。方向由哪边 border 非透明决定，比如下方气泡的三角，就让 border-top-color 有值，其他三边透明。
.tooltip::before {
content: "";
position: absolute;
top: -8px; /* 三角尖顶到提示框上边缘 */
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #333;
}- 三角大小由 border 宽度决定，统一用 px，别混用 em/rem
- 如果提示框带圆角，三角尖位置要微调（比如
top: -7px），否则会露白边 - 不要给伪元素设
display: block—— 它默认就是，加了反而可能干扰
移动端点击触发时，气泡位置错乱怎么办？
常见于 iOS Safari 或某些安卓 WebView：滚动后点击，getBoundingClientRect() 拿到的位置没更新，或者 position: absolute 在缩放/滚动中偏移。根本原因不是 CSS，而是定位计算时机不对。
立即学习“前端免费学习笔记（深入）”；
- 避免在
touchstart里立刻计算位置，改用touchend或click - 如果用 JS 动态插入气泡，插入后强制重排：
tooltip.offsetHeight（读取 layout 触发回流） - 更稳妥的做法：不用 JS 计算位置，全靠 CSS 布局 —— 把提示框作为子元素嵌在触发元素内部，用
position: absolute+top/bottom控制方向，靠父容器的position: relative锚定
复杂点在于三角方向响应式切换：上/下/左/右气泡共用一套样式时，::before 的 top/bottom/left/right 和 border 方向必须一一对应，漏掉一个就会翻车。
