使用伪类可实现图标交互效果：:hover 改变悬停样式，:active 响应点击状态，:focus 提升可访问性，结合 ::before/:after 动态替换图标内容，通过颜色、大小、transform 等属性增强视觉反馈。
在 CSS 中，伪类可以用来控制图标的交互状态，比如鼠标悬停、点击、获得焦点等。通过结合伪类和图标（如字体图标或 SVG 图标），我们可以动态改变图标的样式，实现更丰富的视觉反馈。
:hover - 鼠标悬停时改变图标
当用户将鼠标移到图标上时，使用 :hover 伪类来改变颜色、大小或旋转图标。
示例：.icon:hover {
color: #007bff;
transform: scale(1.2);
}
:active - 图标被点击时的样式
使用 :active 伪类可以让图标在被按下时产生反馈效果，比如变暗或缩小。
示例：.icon:active {
color: #0056b3;
transform: scale(0.95);
}
:focus - 键盘聚焦时控制图标状态
对于可聚焦的元素（如带 tabindex 的图标按钮），使用 :focus 来提供无障碍支持，显示清晰的聚焦轮廓。
立即学习“前端免费学习笔记（深入）”；
示例：.icon-button:focus {
outline: 2px solid #007bff;
border-radius: 4px;
}
:before / :after 配合伪类控制图标内容
如果图标是通过 ::before 或 ::after 插入的（如 Font Awesome 字体图标），可以结合属性和伪类控制其状态。
示例（使用 content 属性插入图标）：.button::before {
content: "★";
margin-right: 5px;
}
.button:hover::before {
content: "⭐";
color: gold;
}
基本上就这些常见用法。关键是把伪类和图标的样式属性（颜色、大小、content、transform 等）结合起来，根据用户行为动态调整外观。注意在实际项目中保持视觉一致性，并考虑可访问性。
