选::before或::after均可，关键在于父容器设position: relative，伪元素用position: absolute配合top/left和transform精确定位箭头。
气泡框箭头用 ::before 还是 ::after？选哪个不重要，关键得和主元素共用定位上下文
直接给结论：只要父容器设了 position: relative，::before 和 ::after 都能用，效果完全一致。真正决定箭头位置的，是伪元素自身的 position: absolute + 四个方向偏移（top/left 等）+ transform 微调。
常见错误是把伪元素写在气泡外部容器上，结果箭头飘到屏幕左上角——因为没给父容器加 position: relative，伪元素会向上逐级找最近的定位祖先，找不到就相对于 viewport 定位。
- 气泡内容容器必须设
position: relative - 伪元素设
position: absolute，再用top/left把它“挪”到边角附近 - 用
transform: translate(-50%, -50%)居中对齐箭头尖端（比如让三角形顶点精准指向目标元素） - 避免只靠
left: 20px这类固定值——响应式下会错位，优先用left: 50%+transform
三角形箭头怎么画？border 技巧必须配合透明边框
用 border 画三角形本质是利用 CSS 边框交汇时的斜角渲染。关键不是“画”，而是“藏掉不需要的三边”。
比如要一个向下指的黑色箭头：
立即学习“前端免费学习笔记（深入）”；
.bubble::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #333;
}- 三边设
transparent，只留一边有颜色，才能显出单向三角形 - 尺寸统一用
px，别混用em或rem，否则缩放时比例易崩 - 如果箭头太钝或太尖，调的是边框宽度（
6px），不是宽高——宽高必须保持为0 - IE8 不支持
::after伪元素，如需兼容，得用真实 DOM 元素 + 同样 border 技巧
箭头位置总对不准？问题八成出在 transform 和 box-sizing 的组合
明明写了 left: 50% + transform: translateX(-50%)，箭头还是偏左/偏右几像素。这不是计算误差，是 border 占据了布局空间但没被 transform 归入中心点。
- 给伪元素加
box-sizing: border-box没用——宽高是0，border 不参与盒模型计算 - 真正有效的是：把
border-width纳入transform偏移量。例如箭头底边宽 12px（左右 border 各 6px），想让顶点居中，就得写transform: translateX(-50%) translateY(-100%)，而不是只写translateX(-50%) - 更稳妥的做法：用
clip-path或 SVG 替代 border 三角形，但兼容性差；或者接受微小偏差，用left: calc(50% - 6px)手动减去半边 border 宽度 - 移动端触摸区域小，箭头尖端建议至少保持 24px × 24px 可点击区，别让纯三角形成为唯一触发点
绝对定位坐标怎么微调才不破坏响应式？别碰 top/left 数值，改 transform
一旦在媒体查询里反复覆盖 top: 12px → top: 8px，维护成本飙升。微调应该只发生在 transform 层级。
- 初始定位用
top/left搞定大体方位（比如箭头在气泡下方，就top: 100%） - 所有像素级修正全交给
transform: translateY(...)或translateX(...) - 这样在
@media (max-width: 768px)里只需写一条transform: translateY(-2px)，干净且不影响布局流 - 注意：
transform不触发重排，只重绘，性能比改top更好
最麻烦的其实是气泡随内容高度变化时，箭头需要联动偏移——这时候不能只靠 CSS，得用 JS 监听内容尺寸，动态设置 style.transform。纯 CSS 没法根据子元素高度反推父伪元素位置。
