本文介绍一种优雅的 CSS 解决方案：通过伪元素 ::before 在按钮左侧添加箭头符号（如 ←），同时让按钮内文本自然居中，避免手动计算间距或使用复杂 Flex 布局。
本文介绍一种优雅的 css 解决方案：通过伪元素 `::before` 在按钮左侧添加箭头符号（如 ←），同时让按钮内文本自然居中，避免手动计算间距或使用复杂 flex 布局。
在 Web 开发中，常需设计带有导航语义的按钮（例如“← back”），但又希望视觉上箭头紧贴左侧、文字精确居中于按钮整体宽度——而非“箭头 + 文字”的总宽度中心。若直接将 ← back 作为按钮文本，由于字符宽度不均，back 实际不会位于按钮容器的物理中心；而强行使用 Flex 布局（如 display: flex; justify-content: space-between）又会导致文字无法真正居中于按钮自身宽度。
推荐做法是语义分离：将装饰性箭头移出 DOM，交由 CSS 伪元素控制。这样既保持 HTML 简洁可访问（屏幕阅读器仅读取“back”），又赋予样式完全控制权。
✅ 正确实现方式如下：
<button style="width: 80px;">back</button>
button {
position: relative; /* 为伪元素提供定位上下文 */
width: 80px;
padding-left: 20px; /* 预留左侧空间，防止箭头与文字重叠 */
text-align: center; /* 显式声明居中（增强兼容性，尤其对旧版 Safari/IE） */
}
button::before {
content: "←";
position: absolute;
left: 8px; /* 可微调箭头距左边缘距离 */
top: 50%;
transform: translateY(-50%); /* 垂直居中对齐 */
}
? 关键要点说明：
-
position: relative是必需的，它使::before的position: absolute相对于按钮自身定位； -
padding-left确保按钮内文本有足够左侧余量，避免箭头遮挡文字； -
top: 50%; transform: translateY(-50%)实现箭头垂直居中（比line-height更可靠，适配不同字体高度）； - 不依赖
flex或grid，兼容性极佳（支持 IE9+）； - 若需适配 RTL（从右向左）语言，可通过
[dir="rtl"] button::before单独调整left→right。
? 进阶提示：如需动态切换方向（如“next →”），可复用同一模式，仅修改 content 和定位方向，保持结构一致性和可维护性。
