按钮后加箭头最省事方案是用::after伪元素，前提是按钮设position: relative，::after必须含content: ""、width: 0、height: 0及四边border声明，箭头方向与大小由border-width控制，定位推荐right: -10px; top: 50%; transform: translatey(-50%)。
按钮后面加箭头用 ::after 最省事
直接在按钮上叠加 ::after 伪元素，不用改 HTML 结构，改一行 CSS 就能出箭头。前提是按钮本身得有 position: relative，否则箭头会飘到页面左上角。
-
::after必须带content: ""，否则不渲染 - 设
display: block或inline-block，不然width/height不生效 - 箭头方向靠
border控制：向右箭头就写border-left: 6px solid #333，其余三边transparent - 水平居中贴右边：用
right: -10px; top: 50%; transform: translateY(-50%)，比硬算margin-left更稳
border 画箭头时 width 和 height 必须为 0
只要 width 或 height 不是 0，三角形就变形——变成梯形、钝角，甚至完全看不出是箭头。这不是浏览器 bug，是边框交汇原理决定的。
- 错误写法：
width: 1px; height: 1px;→ 箭头歪斜或消失 - 正确写法：
width: 0; height: 0;+ 四边border声明（哪怕透明也得写全） - 安卓 WebView 对缺失的
border-bottom等声明更敏感，漏一条可能整块不显示 - 箭头大小只由
border-width决定，比如border-left: 8px solid #333→ 底边约 16px 宽
移动端点击区域太小？加 pointer-events 和 padding
伪元素生成的箭头本身没有物理尺寸，width: 0; height: 0; 导致触摸热区极窄，iOS Safari 尤其容易点不中。
- 给
::after加pointer-events: auto（默认是none） - 按钮父容器右侧留足
padding-right: 24px（比箭头宽多留 8px）撑开可点区域 - 真机调试时箭头偏移，八成是按钮嵌在
flex或grid容器里，但外层没设position: relative - 避免用
transform: scale()缩放整个按钮——箭头位置会失准，优先调border-width控制大小
IE11 及以下不支持 transform 怎么办？
如果项目还要兼容 IE11，transform: translateX(-50%) 会失效，但别急着换 JS，有纯 CSS 降级方案。
- 用
left: calc(50% - 8px)替代transform，前提是箭头宽度固定（如border-width: 8px） - IE9 不支持
calc()里的百分比，只能退到left: 50px这类固定值（需配合媒体查询适配） - 别混用
top和transform: translateY()，旧版 Safari 可能触发亚像素模糊 - 真正需要兼容的老系统，建议直接用 Unicode 字符（如
→）+font-size控制大小，比 border 更稳
实际最常踩的坑不是写不出箭头，而是忘了给按钮加 position: relative，或者伪元素漏了 content: "" ——这两条一错，箭头就彻底失踪，查半天 DOM 也找不到原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
