在网页交互里，按钮在鼠标悬停时浮现一个小图标，是很常见的微交互。借助CSS的伪元素::before配合content属性，可以在不修改DOM结构的前提下完成这个效果。核心思路是：按钮本身保持文字内容不变，用::before生成一个前置盒子，里面通过content放入图标字符或图片地址，平时隐藏，悬停时显示。
一、为什么用::before而不是额外标签
很多初学者会选择在按钮内部再写一个<span>来放图标，然后通过:hover控制显示。这种做法虽然直观，但会让HTML变得臃肿，尤其当页面有大量按钮时，重复的结构不利于维护。伪元素::before由CSS动态生成，不会出现在文档树中，既保持了结构的干净，也方便统一控制样式。
从渲染机制看，::before默认以行内元素形式插入到元素内容之前，我们可以通过display改为inline-block或block，再结合position做绝对定位，从而精确摆放在按钮左侧或右侧。由于它属于按钮的子级渲染层，悬停态的过渡动画也能自然作用于图标，不需要JS参与。
二、基础实现：字符图标悬停显示
最简单的方式是使用Unicode字符当作图标。比如用一个箭头“→”或者星号“★”，通过content: "→"写入。平时把::before的opacity设为0，悬停时改为1，并加上transition让变化平滑。下面是一段可直接运行的示例：
.btn {
position: relative;
padding: 8px 16px;
border: none;
background: #2d8cf0;
color: #fff;
cursor: pointer;
font-size: 14px;
}
.btn::before {
content: "→";
display: inline-block;
margin-right: 0;
opacity: 0;
transform: translateX(-6px);
transition: opacity 0.2s, transform 0.2s;
}
.btn:hover::before {
opacity: 1;
transform: translateX(0);
margin-right: 6px;
}
上面代码中，::before初始是透明且向左偏移的，鼠标移入按钮时，它淡入并滑到正常位置，同时撑开一点右边距，让文字和图标之间有间隙。这种写法兼容性好，几乎支持所有现代浏览器。
要注意的是，content里的字符会受到字体影响。如果某些系统字体没有对应字形，可能显示成方框。更稳妥的做法是引入Iconfont之类的字体文件，用对应的字体类或编码来引用，例如content: "e601"，并确保按钮设置了该字体族。
三、使用图片作为悬停图标
如果不想用字符，也可以用图片。此时content的值写成url(图标地址)。不过图片尺寸固定，需要用width、height以及background-size配合，或者直接用content: url()并在伪元素上设宽高溢出隐藏。示例如下：
.btn-icon::before {
content: url(https://ipipp.com/icon/arrow.png);
display: inline-block;
width: 16px;
height: 16px;
opacity: 0;
vertical-align: middle;
transition: opacity 0.2s;
}
.btn-icon:hover::before {
opacity: 1;
}
这段代码把一张网络图标作为::before的内容。由于content: url()引入的图片无法用background控制裁切，若图标实际尺寸不是16×16，可能会被拉伸。实践中更推荐把图片写为background-image，而content留空字符串，仅用伪元素当容器。
例如改成：content: ""; background: url(https://ipipp.com/icon/arrow.png) no-repeat center / 16px 16px;。这样既能控制背景大小，也方便用background-position调整位置，比直接用content: url()灵活得多。
四、对齐与层叠的常见坑
按钮文字与伪元素图标对齐是高频问题。行内元素默认基线对齐，图标和文字底部常不对齐。解决办法是给::before加vertical-align: middle，或把按钮设为flex布局，用align-items: center统一居中。若按钮本身已有position: relative，伪元素用position: absolute定位时，要留意父级是否溢出隐藏，否则图标可能被裁掉。
| 问题现象 | 可能原因 | 处理方式 |
|---|---|---|
| 悬停无图标出现 | content未设置或值为空 | 确认写了content且非空字符串 |
| 图标与文字错位 | 行内基线对齐差异 | 用vertical-align或flex居中 |
| 图标被按钮边框截断 | 绝对定位超出overflow范围 | 调整父级overflow或定位值 |
另外，如果页面里其他样式给::before设了content: none或display: none，可能会覆盖你的规则。CSS优先级在这里很关键，建议用类选择器明确限定，如.btn:hover::before，避免被全局reset影响。
五、完整可复用方案
综合上述要点，下面给出一个用背景图且带过渡的完整写法，方便直接套用到项目里。它用空content生成盒子，平时宽度0、透明，悬停时展开，不影响按钮原本布局：
.ui-btn {
position: relative;
display: inline-flex;
align-items: center;
padding: 10px 18px;
background: #19be6b;
color: #fff;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
overflow: hidden;
}
.ui-btn::before {
content: "";
width: 0;
height: 16px;
margin-right: 0;
background: url(https://ipipp.com/icon/check.png) no-repeat center / 16px 16px;
opacity: 0;
transition: width 0.25s, opacity 0.25s, margin-right 0.25s;
}
.ui-btn:hover::before {
width: 16px;
margin-right: 6px;
opacity: 1;
}
这个方案在悬停时让伪元素宽度从0变到16px，同时浮现背景图，由于父级是inline-flex且overflow隐藏，动画看起来像图标从按钮内部滑出。相比频繁操作DOM，纯CSS实现维护成本更低，也更利于性能。
总体来看，用::before加content控制按钮悬停图标，是一种轻量、语义友好的方式。只要理清content的取值限制、伪元素定位与对齐规则，就能稳定做出各种悬停微交互，而不必依赖JavaScript或额外标签。