用::before和::after画箭头最实用，因无需额外DOM、语义干净、样式可复用且继承父级颜色字体；但须设父元素position: relative，content必须为""，border三角形更轻量兼容，深色模式下应使用currentColor确保颜色一致。
为什么用 ::before 和 ::after 画箭头最实用
因为不需要额外 DOM 节点，语义干净，样式可复用，且支持伪元素继承父级颜色、字体等属性。但要注意：必须给父元素设置 position: relative，否则 ::before 和 ::after 的 absolute 定位会相对于最近的定位祖先（可能跑偏）。
- 箭头本质是旋转 45° 的正方形或用 border 拼出的三角形，后者更轻量、兼容性更好
- 用
border方案时，只保留一个方向的边框（如border-top），其余设为 transparent，再配合width: 0; height: 0; - 若气泡本身有圆角（
border-radius），箭头尖端容易和圆角交界处露白——此时需微调箭头的top/left值，或给气泡加overflow: hidden（慎用，可能裁剪阴影）
::after 画箭头时，content 必须写 ""
这是最容易漏掉的一环：::before 和 ::after 默认不渲染，除非 content 非空。哪怕只画箭头，也得显式写 content: ""，否则整个伪元素无效。
- 写成
content: " "（空格）也能生效，但多占一个空白字符，可能影响行高或换行逻辑 - 写成
content: none或直接省略，箭头完全不会出现 - 如果用了
content: attr(data-tip)显示提示文字，那箭头就得交给::before承担，避免冲突
箭头位置错乱？检查 transform 和 margin 的叠加影响
常见现象：箭头看起来偏上/偏左几个像素，尤其在使用 transform: translate(-50%, -50%) 居中时。这是因为 transform 是基于伪元素自身尺寸计算的，而 border 三角形的“视觉中心”和盒模型中心并不重合。
- 推荐优先用
top/left+margin微调，例如top: 100%; left: 20px; margin-left: -8px;（假设箭头宽 16px） - 若必须用
transform，先设width: 0; height: 0;，再通过border构建三角形，此时transform: translateX(-50%)才真正居中箭头底边中点 - 不要对伪元素同时设
transform和top/left，二者行为叠加后难以预测
深色模式下箭头颜色不对？别忘了继承逻辑
伪元素默认继承父元素的 color，但 border-color 不继承。如果你靠 color 控制气泡文字色，却用固定值写箭头边框（如 border-bottom-color: #333），深色模式切换时箭头就会突兀。
立即学习“前端免费学习笔记（深入）”；
- 改用
border-bottom-color: currentColor，让箭头自动匹配文字色 - 如果气泡背景色和文字色是反色关系（比如白底黑字 / 黑底白字），
currentColor仍能保持一致 - 注意：IE 不支持
currentColor在border-color中的使用，如需兼容，得用 JS 切换 class 或 CSS 自定义属性 fallback
position、content、border 三者稍一错位就失效；更隐蔽的是 currentColor 的继承边界和 transform 对零尺寸盒子的偏移逻辑。 
