答案：通过:hover与::before结合transform实现图标旋转，先设置伪元素样式并添加过渡效果，悬停时应用rotate()完成旋转动画。

要实现CSS元素在悬停时图标旋转，可以结合 :hover 伪类与 ::before 伪元素，并利用 transform: rotate() 来完成动画效果。这种方式常用于字体图标（如 Font Awesome）或自定义符号的动态展示。

1. 使用 ::before 插入图标并设置基础样式

.icon {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 50px;
  font-size: 24px;
  text-align: center;
  line-height: 50px;
  color: #333;
}

.icon::before {
  content: "↻"; /* 可替换为 Font Awesome 的 \f021 等 */
  font-family: "Font Awesome 6 Free"; /* 如果使用 FA */
  font-weight: 900;
  display: block;
  transition: transform 0.3s ease; /* 添加平滑过渡 */
}

2. 在 :hover 时触发旋转动画

.icon:hover::before {
  transform: rotate(180deg);
}

3. 可选：实现持续旋转动画

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.icon:hover::before {
  animation: spin 0.6s linear forwards;
}

这样就能在鼠标悬停时让图标平滑旋转。关键是确保 ::before 元素有 transition 或 animation 支持，且 transform 属性能被正确触发。

基本上就这些，不复杂但容易忽略过渡和定位细节。