最轻量、兼容性最好的方式是直接在按钮文本中嵌入HTML实体→；它原生支持、零依赖、无障碍友好，且无需额外样式或字体资源。
用 → 或 → 插入右箭头字符
最轻量、兼容性最好的方式是直接在按钮文本里嵌入 HTML 实体。浏览器原生支持，不需要额外字体或图标库，也不会触发 CORS 或加载失败问题。
常见可选箭头字符：
-
→→（U+2192，标准右箭头） -
→→（十进制写法，效果同上） -
➞➎（更粗的“箭头末端带圆点”，适合强调） -
➔➔（细长箭头，视觉更现代）
示例：
<button type="button">下一步 →</button>
用 CSS 伪元素 ::after 添加箭头更灵活
当需要独立控制箭头颜色、大小、间距，或动态切换状态（如悬停时箭头变色）时，伪元素比内联字符更可控。
立即学习“前端免费学习笔记（深入）”；
关键点：
- 必须给按钮设
position: relative，否则::after的绝对定位会脱离上下文 - 用
content: "→"（注意：引号内是真实字符，不是实体），避免转义问题 - 推荐用
transform: translateX(4px)微调位置，比margin-left更稳定（不受盒模型影响）
示例：
button { position: relative; padding-right: 24px; }<br>button::after {<br> content: "→";<br> position: absolute;<br> right: 8px;<br> top: 50%;<br> transform: translateY(-50%);<br> font-size: 1.1em;<br>}
避免用 > 或 >> 替代箭头
虽然 > 显示为 >，但它语义是“大于”，不是箭头；在高 DPI 屏幕或小字号下易被误读，且无法通过 CSS 单独缩放或着色。
更严重的问题：
- 屏幕阅读器可能朗读为 “greater than”，破坏无障碍体验
- 某些字体中
>和→宽度不同，导致按钮文字左右晃动（尤其配合text-align: center时） -
>>是两个字符，间距不可控，响应式布局下容易折行
如果要用 SVG 箭头，务必内联且精简
SVG 能实现精确控制形状和动画，但引入外部文件或复杂路径会拖慢渲染。真要用，就内联最简路径：
示例（12×12 像素右箭头）：
<button type="button"><br> 下一步<br> <svg width="12" height="12" viewBox="0 0 12 12" style="vertical-align: -2px; margin-left: 4px;"><br> <path d="M2 6h8M8 2l4 4-4 4" stroke="currentColor" stroke-width="1.5" fill="none"/><br> </svg><br></button>
注意：vertical-align: -2px 是对齐关键，不同字体需微调；stroke="currentColor" 让箭头随文字颜色自动变化，省去单独配色。
别忘了移除 SVG 中的 xmlns、xml:space 等冗余属性——它们在内联 SVG 中不必要，还可能触发 IE 兼容模式。
