通过:hover触发::before的transform实现悬停旋转，首先为::before设置inline-block和transition，再在.icon:hover::before中添加transform:rotate(90deg)，即可使前置符号平滑旋转，适用于下拉箭头等交互效果。
当需要在鼠标悬停时让一个元素的前置装饰符号（比如用 ::before 生成的图标或符号）旋转，可以通过结合 :hover 和 transform: rotate() 实现。关键是为 ::before 设置过渡效果，并在父元素 hover 时改变其旋转状态。
1. 基本结构与样式
假设你有一个 <span></span> 元素，想在其前面添加一个箭头或圆点作为装饰，并在鼠标悬停时旋转它。
<span class="icon">菜单项</span>
使用 CSS 的 ::before 伪元素插入内容，例如一个 Unicode 字符或自定义图标：
.icon::before {
content: "▶";
display: inline-block;
margin-right: 8px;
transition: transform 0.3s ease;
font-size: 12px;
}
说明： 设置 display: inline-block 是为了让 transform 正常生效，transition 让旋转有动画效果。
立即学习“前端免费学习笔记（深入）”；
2. hover 时旋转 ::before
当鼠标移到 .icon 上时，让其前置符号旋转。通过选择器 .icon:hover::before 实现：
.icon:hover::before {
transform: rotate(90deg);
}
这样，鼠标悬停时，前置的 ▶ 符号会顺时针旋转 90 度，常用于下拉菜单的展开指示。
3. 完整示例代码
<style>
.icon {
cursor: pointer;
padding: 10px;
user-select: none;
}
.icon::before {
content: "▶";
display: inline-block;
margin-right: 8px;
transition: transform 0.3s ease;
font-size: 12px;
}
.icon:hover::before {
transform: rotate(90deg);
}
</style>
<span class="icon">悬停试试</span>
你可以将 content 换成其他符号，如 "+"、"▼" 或使用 Font Awesome 的图标字符（需引入字体），实现不同视觉效果。
4. 扩展技巧
- 若想持续旋转一圈，可用
transform: rotate(360deg) - 配合
transform-origin调整旋转中心点 - 使用自定义 SVG 背景图时，也可通过
background-position实现动效，但transform更适合纯旋转
基本上就这些。利用 :hover 触发 ::before 的 transform，就能轻松做出动态前置图标效果，不复杂但很实用。
