按钮中用::before和::after插入图标需设position: relative，否则伪元素定位错乱；content为强制属性，须设content: “”；常见不可见原因包括缺content、字体未加载、未设absolute定位及偏移、SVG尺寸未设。
按钮中用 ::before 和 ::after 插入图标的前提条件
必须给按钮设置 position: relative，否则伪元素的绝对定位会相对于最近的定位祖先（可能跳到 body 或父容器），导致图标飘走。伪元素默认是 inline 级，不设宽高、不设 content 就不会渲染——content 是强制属性，哪怕只写 content: "" 也得有。
::before 放图标时为什么经常看不见
常见原因有三个：
• 没加 content: ""，伪元素直接被忽略
• 图标字体（如 Font Awesome）没正确加载，或 font-family 写错，导致显示成方块或空白
• 忘了设 position: absolute 和偏移量（比如 left: 8px 或 right: 8px），让它堆在文字里挤成一团
• SVG 背景图方式下，忘了设 width/height 或 background-size，图标缩成一个点
推荐做法：用字体图标时，::before 常配 font: normal normal normal 16px/1 "Font Awesome 5 Free"；用 base64 SVG 时，用 background + padding-left 推开文字更稳。
按钮两端同时用 ::before 和 ::after 的布局要点
两端图标+文字要对齐，关键在尺寸和盒模型控制：
• 统一设 display: inline-block 或 display: flex（按钮本身用 flex 更易控垂直居中）
• 伪元素统一设 vertical-align: middle（配合 inline 元素）或用 top: 50%; transform: translateY(-50%)（配合 absolute）
• 文字内容用 padding-left/padding-right 预留空间，比靠伪元素的 left/right 更可靠，尤其按钮宽度变化时
• 避免同时对伪元素设 width 和 padding 又不设 box-sizing: border-box，容易撑出横向滚动条
立即学习“前端免费学习笔记（深入）”；
