如果使用 CSS 伪元素绘制的箭头始终没有显示，通常应先排查三个关键前提是否都已满足：父级容器是否遗漏了 position: relative，伪元素是否补充了 content: ""，以及 width/height 是否被明确设置为 0。继续往下检查时，还要注意 border 三角形这种写法本身存在固定规则：四条边的 border-width 需要保持一致，同时其中三条边必须设置为 transparent。在定位箭头时，top 往往要取 -border-width 的负值，并结合 transform: translateX(-50%) 才更容易实现准确居中。如果应用在移动端页面，还要额外关注点击与触控体验，通常建议加上 pointer-events: none，再通过父容器的 padding 适当扩大可点击热区。
伪元素没显示？先检查这三个关键条件
如果你用 ::before 或 ::after 绘制 CSS 箭头却始终不显示，90% 的情况都与以下三个基础条件有关：
• 父容器没有设置 position: relative（否则伪元素会以 body 或其他上层元素为定位参考，导致箭头位置跑偏）
• 伪元素没有写 content: ""（这是最常见的隐藏问题，不写就不会渲染）
• width 和 height 没有强制设为 0（只要尺寸非零，边框三角形就可能变形、变成梯形，甚至直接看不见）
border三角法必须四边完整设置，差一个像素都可能露白边
很多人用 CSS border 画三角箭头时，容易误以为只要把三边设成 transparent 就够了，但实际上这种写法有明确的几何规则：
• 四个方向的 border-width 必须保持完全一致（例如统一写成 6px）
• 只能保留一边为实色，另外三边必须显式声明为 transparent（不能省略不写）
• border-top 为有色时，箭头朝下；border-bottom 为有色时，箭头朝上；左右方向同样适用
例如绘制一个朝右的 CSS 箭头：border-left: 6px solid #333; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 0;
箭头总是悬空或偏移？问题通常出在定位原点和尖端不一致
当你写 left: 50% 时，真正参与对齐的是伪元素盒子的左边缘；但用 border 方式绘制出来的三角形，视觉上的定位核心其实是它的几何尖端。以朝上的箭头为例，border-bottom: 6px solid #333 形成的三角尖端，实际位于底边中点正上方 6px 的位置。
• 因此，top 通常必须写成 -6px，也就是当前 border-width 的负值
• 水平居中时建议一定搭配 transform: translateX(-50%)，如果仅依赖 margin-left，当文字长度或容器宽度变化时，箭头就很容易错位
• 不过如果气泡容器本身设置了 padding: 12px，而箭头又需要从顶部正中间伸出，那么此时 top 更应该写成 -12px，而不是 -6px
移动端点击不准？伪元素本身默认几乎没有触控热区
::before/::after 生成的箭头由于宽高都是 0，在 iOS Safari 和安卓 WebView 等移动端浏览器中，触摸热区会非常窄，不利于点击交互。
• 可以给伪元素添加 pointer-events: none，避免箭头遮挡鼠标悬停或点击事件
• 但如果想真正扩大可点击范围，仍然需要依靠父容器增加 padding，或者通过额外包裹层来扩展热区
• 尽量避免使用 transform: scale() 去整体放大按钮，因为这类方式常常会导致箭头定位失准，优先通过调整 border-width 来控制箭头大小会更稳定
实际开发中，真正难的并不是单纯画出一个 CSS 提示箭头，而是让箭头尖端位置、定位偏移、父容器的 box-sizing，以及不同设备上的字体渲染差异都保持一致。哪怕只有 1px 的误差，在 Retina 高分屏上也可能出现白边、锯齿或明显错位。
