::before箭头对不齐主因是未设content: ""、父容器缺position: relative，且伪元素默认行内级导致定位基准错乱；须用border法绘三角、absolute精确定位，并避免transform居中引发的像素偏移。
为什么::before生成的箭头总对不齐？
因为::before默认是行内元素，不设置content、position和display就不可能精准定位。最常见的是箭头偏移、旋转错位、或被父容器裁切——根源往往不是三角形画得不对，而是定位基准没设对。
实操建议：
-
content: ""必须写，哪怕为空字符串，否则::before不渲染 - 父容器要设
position: relative，箭头才好用absolute相对它定位 - 箭头本身推荐用
border法（非transform: rotate），更稳定：比如border-top: 8px solid #333; border-left: 8px solid transparent; border-right: 8px solid transparent; - 若气泡带圆角，箭头尖端容易露馅——把箭头
top或left微调-1px，或给气泡加overflow: hidden
怎么让箭头自动指向目标元素方向？
纯CSS做不到“自动判断方向”，但可通过类名切换控制。比如.tooltip--top::before画朝上的箭头，.tooltip--right::before画朝右的，靠border哪边有颜色来决定朝向。
关键点：
立即学习“前端免费学习笔记（深入）”；
- 朝上箭头：设
border-bottom为实色，border-left/right为transparent，bottom: 100%+left: 50%+margin-left: -8px（半宽）居中 - 朝右箭头：用
border-left实色，top: 50%+left: 100%+margin-top: -8px - 避免用
transform: translate做居中，IE下可能模糊；优先用margin抵消尺寸 - 如果提示框要随滚动保持位置，别忘了给箭头也加
will-change: transform防重绘卡顿
::before和::after能一起用吗？
能，而且常用：一个画箭头，一个画气泡主体。但要注意层叠顺序——::before默认在::after底下，所以通常让::after画气泡、::before画箭头，再用z-index确保箭头不被遮挡。
典型结构：
.tooltip {
position: relative;
}
.tooltip::before {
content: "";
position: absolute;
border: 8px solid transparent;
border-top-color: #333;
top: 100%;
left: 20px;
z-index: 2;
}
.tooltip::after {
content: "提示文字";
position: absolute;
top: 100%;
left: 0;
background: #333;
color: white;
padding: 6px 12px;
border-radius: 4px;
z-index: 1;
}
注意：z-index只在position非static时生效；两个伪元素不能共用同一套top/left值，否则会重叠。
移动端点击触发时箭头消失或错位？
多数情况是:hover在触摸设备上失效，或focus状态未正确继承。伪元素本身不会消失，但触发逻辑断了。
解决方式：
- 改用
:focus-within配合tabindex="0"，兼容触屏和键盘 - 避免依赖
pointer-events: none——它会让伪元素不可交互，箭头点不到 - 真要适配iOS Safari，加
-webkit-tap-highlight-color: transparent防点击闪动 - 如果气泡用
transform: scale()动画，箭头也要同步加transform-origin，否则缩放中心偏移
箭头这种小元素，像素级偏差很容易被放大，调的时候别只看桌面端，拿真机连着 devtools 把top/left值拖动到小数点后一位试试。
