button伪元素箭头对不齐因默认行内盒导致定位基准错乱；应设position: relative/absolute、用transform居中、border绘三角、1em动态右移、scale微调防锯齿、is-disabled类控制禁用态显示。
button 伪元素箭头为什么总对不齐？
因为 ::before 或 ::after 默认是行内盒，不参与流式布局，直接用 top/left + transform 位移时，基准点容易错乱。常见表现是箭头飘在按钮上方、偏左一截、或旋转后尖角不对准文字末端。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
button设置position: relative，确保伪元素的top/left是相对于按钮盒计算 - 伪元素用
position: absolute，并显式设content: ""和display: block - 用
transform: translate(-50%, -50%)居中定位，而不是只靠left: 50%—— 否则旋转后中心偏移会放大误差 - 箭头三角用
border法（比如border-left: 6px solid transparent）比 SVG 更轻量，也更易随字体大小缩放
如何让箭头随按钮文字动态右移？
硬写死 right: 12px 在响应式场景下极易错位，尤其按钮文字长度变化时（如多语言切换、缩放字体）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把箭头伪元素放在文字末尾：用
button::after { right: 1em; }，1em相对于当前字体大小，天然适配文字宽度变化 - 如果必须精确对齐文字右边界，可配合
padding-right预留空间，再用right: 0+transform: translateX(50%)把箭头“顶”到 padding 区右侧 - 避免用
margin-left推开箭头——它会破坏按钮内联盒的 baseline 对齐，导致多行按钮高度异常
rotate(45deg) 后箭头变模糊或锯齿？
CSS 旋转在非整数像素坐标下渲染时，浏览器会做亚像素插值，尤其小尺寸三角（如 6px 边框）容易发虚或边缘抖动。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
transform: rotate(45deg) scale(1.001)微调，触发硬件加速并缓解重采样失真 - 给伪元素加
backface-visibility: hidden，强制启用 GPU 渲染层 - 若支持现代浏览器，改用
clip-path: polygon(0 0, 100% 0, 100% 100%)绘制三角，完全规避 border 渲染缺陷 - 不要用
transform: skewX()模拟箭头——角度控制难，且锯齿更严重
按钮禁用状态（disabled）下箭头还显示？
button:disabled::after 在部分浏览器（如旧版 Safari）里仍会渲染，视觉上违背交互预期。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 禁用时统一用
opacity: 0.4+pointer-events: none，而非依赖:disabled伪类选择器 - 更稳妥的做法是加一个
is-disabled类，CSS 写.btn.is-disabled::after { display: none; }，可控性更强 - 如果用了
clip-path方案，记得在禁用态同步设置clip-path: none，否则可能残留不可见但占位的图形
真正麻烦的是不同浏览器对 button::after 在 disabled 下的继承策略不一致，别信 “写了 :disabled 就一定隐藏” 这种直觉。
