使用::before伪元素和content属性可在按钮悬停时显示图标。1. 为button添加类名icon-btn作为样式钩子；2. 利用.icon-btn::before插入内容并绝对定位，初始opacity:0隐藏；3. 在.icon-btn:hover::before中将opacity设为1，实现悬停渐显；4. 可结合font awesome字体设置content的unicode值增强图标效果，通过transition优化动画流畅度。
要实现CSS按钮悬停时显示小图标，可以使用 ::before 伪元素结合 content 属性来控制图标的显示与隐藏。这种方式无需额外HTML标签，简洁且易于维护。
1. 基础结构：HTML按钮
给按钮添加一个类名，便于样式控制：2. 使用 ::before 和 content 插入图标
通过 ::before 在按钮内容前插入图标，初始状态隐藏，悬停时显示：
.icon-btn {
position: relative;
padding: 10px 15px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
transition: all 0.3s ease;
}
<p>.icon-btn::before {
content: "★"; /<em> 可替换为其他符号或使用字体图标 </em>/
position: absolute;
left: -10px; /<em> 图标在文字前面一点 </em>/
opacity: 0; /<em> 初始隐藏 </em>/
transition: opacity 0.3s ease;
}</p>
3. 悬停时显示图标
利用 :hover 状态改变伪元素的 opacity 或 visibility：
.icon-btn:hover::before {
opacity: 1; /* 悬停时显示 */
}
你也可以用 visibility + margin 实现更自然的出现效果：
.icon-btn::before {
content: "→";
position: absolute;
left: -20px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
<p>.icon-btn:hover::before {
opacity: 1;
visibility: visible;
left: 10px; /<em> 悬停时滑入 </em>/
}</p>
4. 使用字体图标（如 Font Awesome）增强效果
引入 Font Awesome 后，可通过设置 content 的 Unicode 显示图标：
.icon-btn::before {
font-family: "Font Awesome 5 Free";
content: "\f054"; /* 向右箭头 */
font-weight: 900;
margin-right: 8px;
opacity: 0;
transition: opacity 0.3s;
}
.icon-btn:hover::before {
opacity: 1;
}
基本上就这些。通过控制伪元素的 content 和显示状态，就能轻松实现按钮悬停出现小图标的动效，不复杂但很实用。
立即学习“前端免费学习笔记（深入）”；
