按钮中用::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，容易撑出横向滚动条
立即学习“前端免费学习笔记（深入）”；
示例（左侧图标 + 右侧箭头）：
.btn { position: relative; padding: 8px 16px 8px 32px; }
.btn::before { content: "★"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); }
.btn::after { content: "→"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
用伪元素做悬停状态图标切换的坑
想实现“默认显示 ✅，hover 显示 ➕”，不能只改 content——CSS 不允许在伪元素里用 transition 动画 content 属性。可行方案只有：
• 两个伪元素都存在，用 opacity + visibility 切换显隐（需设 transition: opacity .2s）
• 把图标全写进 content，用 Unicode 变体或字体不同字符，但无法动画过渡
• 改用真实子元素（），虽然多写 HTML，但可控性高得多
另外注意：伪元素不触发事件，所以别指望 ::after 的图标能单独绑定 click——它只是视觉层，点击区域还是整个按钮。
真正难处理的是响应式按钮里图标缩放和文字换行冲突，这时候伪元素的定位偏移值最好用 rem 或 em，而不是固定 px。
