伪元素箭头对不齐主因是父容器未设position: relative，导致其相对于最近已定位祖先（如body）偏移；必须显式设置relative，并用absolute+transform精确定位，同时响应式中需同步覆盖伪元素样式。
伪元素箭头对不齐，八成是父容器没设 position: relative —— 它不是可选项，是定位基准的强制前提。
为什么 ::before 箭头总飘到页面顶部或左侧？
伪元素 ::before 或 ::after 用 position: absolute 定位时，参照的是最近一个已定位（position 值为 relative、absolute 或 fixed）的祖先元素。如果气泡容器本身没设 position: relative，它就会一路往上找，最后可能相对于 body 偏移。
- 必须给包裹气泡内容的最外层容器加
position: relative - 别只给内层
<div class="bubble-content"> 加，那不是定位上下文的根<li>如果气泡嵌在 <code>flex或grid容器里，且该容器恰好有position: relative，箭头会以它为基准——此时要检查是否真想让它做锚点 - 向下箭头：
border-top: 8px solid #333; border-left: 8px solid transparent; border-right: 8px solid transparent; - 向上箭头：
border-bottom: 8px solid #333; border-left: 8px solid transparent; border-right: 8px solid transparent; - 向右箭头：
border-left: 8px solid #333; border-top: 8px solid transparent; border-bottom: 8px solid transparent; - 向左箭头：
border-right: 8px solid #333; border-top: 8px solid transparent; border-bottom: 8px solid transparent; - 漏掉任意一条
border-*声明（哪怕透明），某些安卓 WebView 会忽略整个三角渲染 - 向下/向上箭头：用
left: 50%; transform: translateX(-50%) - 向左/向右箭头：用
top: 50%; transform: translateY(-50%) - 避免混用
top和transform: translateY，某些旧版 Safari 会触发亚像素模糊 - IE11 及以下不支持伪元素上的
transform，需降级为left: calc(50% - 8px)（前提是边框宽度固定为 8px） - 所有涉及响应式的调整，必须显式覆盖伪元素选择器，例如：
@media (max-width: 480px) { .bubble::after { top: 8px; border-width: 6px; } } - 边框宽度建议用
px，不用em或rem—— 字体缩放时，border三角会失比例，尤其 iOS「更大字体」模式下 - 小屏下箭头尺寸建议从 8px 降到 6px 或 4px，否则视觉压迫感过强
- 圆角气泡中，箭头尖端建议向内收 1–2px（如
top: calc(100% - 2px)），否则会“顶破”圆角边界
border 三角形方向写反了怎么办？
箭头朝向完全由哪条边框有颜色决定，不是靠 transform 旋转“修正”的。写错方向会导致箭头飞出屏幕，且调试时很难一眼发现。
水平居中箭头为什么用 left: 50% + transform: translateX(-50%)？
因为 border 三角形没有实际宽高（width/height 是 0），无法用 calc(50% - Xpx) 精确扣减；而 transform 是基于自身渲染尺寸计算的，更可靠。
立即学习“前端免费学习笔记（深入）”；
响应式下箭头变大、错位或消失？
媒体查询不会自动继承到伪元素上，@media 里改了气泡尺寸，但忘了重置 ::before 的 top/right/border-width，箭头就容易被裁或偏移。
真正卡住人的从来不是怎么画三角，而是定位上下文是否干净、方向逻辑是否闭环、响应式是否连伪元素一起覆盖——这三个点漏掉任何一个，箭头就大概率在某个机型或缩放比例下突然失效。
