最稳妥的右向三角形箭头用::after实现：设content: ""、position: absolute，父元素relative，border-left实色+上下透明，right固定偏移+top50%+transform居中，颜色用currentColor，尺寸用em，必加pointer-events: none。
用 ::after 画右向三角形箭头最稳妥
直接用伪元素画箭头，比插入 SVG 或图片更轻量，也更容易随按钮状态（比如 :hover）动态变化。关键不是“怎么画”，而是“怎么对齐+不破坏布局”。
常见错误是箭头位置飘、上下居中失效、或者点击区域变小——本质是没重置伪元素的默认行为。
-
::after必须设content: ""，否则不渲染 - 推荐用
position: absolute定位，父容器（按钮）加position: relative - 三角形用
border技巧：只设单边实色边框，其余三边透明，例如border-left: 6px solid #333配合border-top: 4px solid transparent等 - 水平居中箭头？别靠
left: 50%+transform，容易偏移；改用right: 12px这类固定偏移更稳
箭头颜色和尺寸必须和按钮文字联动
如果按钮文字换色或缩放，箭头却还是死值，视觉就割裂了。尤其在暗色模式或动态主题下，硬编码 #333 或 6px 很容易露馅。
- 颜色优先用
currentColor，它自动继承按钮的color值 - 尺寸建议用
em或rem，比如border-left: 0.3em solid currentColor，这样文字放大时箭头同步缩放 - 避免用
px写死边框宽度，除非明确要求像素级固定（比如图标按钮）
移动端点击区域缩水？检查伪元素是否遮挡
伪元素默认会响应点击事件，如果没设 pointer-events: none，可能拦截按钮本身的点击，尤其在 iOS Safari 上更敏感。
立即学习“前端免费学习笔记（深入）”；
- 给
::after加pointer-events: none是安全底线 - 如果箭头需要交互（比如展开菜单），那就另起一个
<span></span>元素，别用伪元素承载逻辑 - 真机测试时留意：iOS 的点击热区判定比桌面严格，箭头离文字太近（
right: 4px）可能误触
IE11 不支持 currentColor 在 border 中？得降级
IE11 能解析 currentColor，但在 border-color 里表现不稳定，有时 fallback 到黑色。这不是 bug，是它的渲染机制限制。
- 兼容 IE11 时，显式写两遍：先用
currentColor，再用border-color: inherit覆盖（IE11 支持inherit） - 或者干脆放弃 IE11，用
@supports (border-color: currentColor)包一层现代写法 - 别指望
filter: brightness()调整伪元素颜色——IE11 不支持伪元素滤镜
button {
position: relative;
padding-right: 24px;
}
button::after {
content: "";
position: absolute;
top: 50%;
right: 12px;
transform: translateY(-50%);
border-left: 4px solid currentColor;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
pointer-events: none;
}
三角形方向、大小、颜色都靠边框控制，但真正卡住人的永远是定位偏移和点击穿透——调完记得在真机上点三下，看有没有延迟或错位。 
