如何用CSS伪元素绘制提示箭头

伪元素箭头不显示需检查三个硬条件：父容器未设position: relative、伪元素缺少content: ""、width/height未强制设为0；border三角法要求四边border-width相等且三边transparent；定位时top应取-border-width负值并配合transform: translateX(-50%)；移动端需用pointer-events: none并靠父容器padding扩大热区。

伪元素没显示？先检查这三个硬条件

伪元素 ::before 或 ::after 画的箭头不出现，90% 是因为漏了以下任一条件：

• 父容器没设 position: relative（否则定位基准是 body，箭头飞走）

• 伪元素没写 content: ""（这是“隐形错误”，样式完全不渲染）

• width 和 height 没强制设为 0（只要非零，三角就变梯形或消失）

border三角法必须四边写全，改一个像素就露白边

用边框画箭头不是“随便设三边 transparent”，而是几何强约束：

• 四边 border-width 必须完全相等（比如都写 6px）

• 仅一边设实色，其余三边显式声明 transparent（不能省略）

• border-top 有色 → 箭头朝下；border-bottom 有色 → 箭头朝上；左右同理

例如朝右箭头：

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 控制大小

真正麻烦的不是画出箭头，而是让它的尖端、定位偏移、父容器 box-sizing、字体渲染差异全部对齐。哪怕只差 1px，在 Retina 屏上也可能露白边或错位。