伪元素三角形箭头必须同时满足三个硬条件：父容器设position: relative、伪元素含content: ""、且width: 0; height: 0；缺一则箭头不显示或定位错误。
伪元素没显示？先确认这三个硬条件
绝大多数箭头不出现，不是写法错，而是漏了基础约束：position: relative、content: ""、width: 0; height: 0。缺一不可。
父容器（比如 .tooltip）不设 position: relative，::after 就会相对于 body 定位，箭头直接飞出视口；content: "" 是伪元素渲染的前提，省略后整个 ::after 样式不生效；width/height 不强制为 0，border 就画不出等腰直角三角形，而是梯形或矩形块。
- 检查父容器是否写了
position: relative - 确认
::after规则里有content: "" - 显式声明
width: 0; height: 0，别依赖继承或默认值
border三角形怎么写才严丝合缝？
border 画箭头本质是“四边等宽、三边透明、一边实色”。只要有一个像素不一致，就会露白边或偏移。
比如朝上的箭头，必须这样写：
.tooltip::after {
content: "";
position: absolute;
width: 0;
height: 0;
border: 6px solid transparent;
border-bottom-color: #333;
}
注意：border-bottom-color 是唯一上色的边，其余三边靠 transparent 显式声明，不能省略；6px 同时决定箭头大小和后续定位偏移量——改它，top/left 值也得同步调整。
- 朝下：用
border-top-color - 朝右：用
border-left-color - 朝左：用
border-right-color - 所有方向都必须四边
border-width相同，且显式写出三边transparent
箭头总飘在半空？定位原点和视觉尖端不一致
left: 50% 定位的是伪元素左边缘，但 border 三角的视觉尖端在几何中心。比如朝上箭头，border-bottom: 6px solid #333 的尖端实际在底边中点正上方 6px 处。
所以必须组合使用：
-
top: -6px（负的border-width，把尖端拉到气泡顶边） -
left: 50%+transform: translateX(-50%)（让尖端对准气泡水平中心） - 如果气泡本身有
padding: 12px，而你想让箭头从气泡内容区顶部伸出，top应该是-18px（12px padding + 6px border），不是单纯 -6px
只写 margin-left: -6px 这类固定值，在文字长度变化或响应式场景下必然错位。
移动端点不中？伪元素默认没有热区
::after 生成的箭头宽高为 0，在 iOS Safari 和安卓 WebView 下触摸热区极窄，用户几乎点不中。
解决办法不是加宽箭头，而是扩大触发区域：
- 给父容器（如
.tooltip）加足够padding，把热区往外延展 - 给
::after加pointer-events: none，避免它拦截点击 - 确保触发元素（比如按钮）自身有合理尺寸，别靠伪元素撑热区
真正难处理的是箭头贴边精度和高 DPI 下的锯齿——这取决于你用 px 还是 em 控制 border-width，以及是否重置了 box-sizing。这些细节一旦忽略，缩放时箭头就模糊或错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
