纯css用::after伪元素画箭头最稳妥，需设button为relative定位，用border技巧或transform+clip-path绘制，避免内嵌字符或svg导致的对齐、语义、响应问题。
纯 CSS 就能做出带箭头的按钮，不用图片、不依赖字体图标，也无需 JS 控制渲染 —— 关键是选对方案：用 ::after 伪元素画箭头，比直接在 button 里塞字符或 SVG 更可控、更易对齐、缩放无损。
用 ::after 伪元素添加右箭头最稳妥
这是目前兼容性好、语义清晰、样式独立的主流做法。核心逻辑是：按钮本身负责文字和交互，箭头由伪元素承担，两者解耦。
- 必须给按钮加
position: relative，否则::after的absolute定位会脱出上下文 -
::after设content: ""，再用 border 技巧画三角形（如border-left: 6px solid #333）或用transform: rotate(45deg)配合clip-path - 水平居中对齐常靠
top: 50%; transform: translateY(-50%)，避免依赖固定行高 - 悬停时只动箭头（比如
transform: translateX(4px)），别让整个按钮抖动
别把箭头写进 button 标签内容里
像 <button>提交 ></button> 这种写法看着简单，但问题一堆：
- 箭头字符（
>或→）字号、粗细、基线位置难和文字对齐，尤其在不同字体下错位明显 - 无法单独控制箭头颜色、大小或 hover 动画，改起来要动整个按钮文本
- 屏幕阅读器可能把箭头读出来（如“提交 右箭头”），干扰语义
- 移动端点击热区变小 —— 字符本身没 padding，实际可点区域窄
border 画三角形箭头时宽高比例容易翻车
常见错误是设了 border-top: 10px solid #000 却忘了其余三边必须等宽且透明，否则三角形歪斜或带残影。
- 向下箭头正确写法：
border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #000; - 向右箭头关键在
border-top/border-bottom透明 +border-left实色，宽度决定箭头“长度”，不是“高度” - IE11 及更早版本不支持
border-color: transparent在部分组合下生效，保险起见统一用rgba(0,0,0,0) - 如果按钮高度是 40px，箭头边框建议 ≤ 6px，太大显得突兀，太小又看不清
需要动态方向或主题色切换？优先考虑 SVG 内联
当箭头要响应 dark mode、支持 fill 颜色绑定 CSS 变量、或需精确控制路径（比如带圆角尾部的箭头），<svg></svg> 比 border 更靠谱。
- 把 SVG 写进
::after的content不行 —— content 不解析 HTML，得用background-image: url("data:image/svg+xml,...") - 更推荐：在按钮内嵌一个
<svg class="arrow-icon">...</svg>，然后用.arrow-icon { width: 16px; height: 16px; fill: currentColor; } - 这样
fill能继承按钮文字色，:hover里改color就自动变色，不用额外写 fill 动画 - 注意 viewBox 值（如
viewBox="0 0 24 24"）要和尺寸匹配，否则 SVG 拉伸变形
真正麻烦的不是画出箭头，而是让箭头在不同按钮高度、不同字体、不同缩放比例下始终对齐、不溢出、不模糊 —— 所以别省那几行 CSS，老实用 position: absolute + transform 精调，比硬调 margin 可靠得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
