通过:hover触发::before的transform实现悬停旋转，首先为::before设置inline-block和transition，再在.icon:hover::before中添加transform:rotate(90deg)，即可使前置符号平滑旋转，适用于下拉箭头等交互效果。
当需要在鼠标悬停时让一个元素的前置装饰符号（比如用 ::before 生成的图标或符号）旋转，可以通过结合 :hover 和 transform: rotate() 实现。关键是为 ::before 设置过渡效果，并在父元素 hover 时改变其旋转状态。
假设你有一个 <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 让旋转有动画效果。
立即学习“前端免费学习笔记（深入）”；
当鼠标移到 .icon 上时，让其前置符号旋转。通过选择器 .icon:hover::before 实现：
.icon:hover::before {
transform: rotate(90deg);
}
这样，鼠标悬停时，前置的 ▶ 符号会顺时针旋转 90 度，常用于下拉菜单的展开指示。
悬停试试
你可以将 content 换成其他符号，如 "+"、"▼" 或使用 Font Awesome 的图标字符（需引入字体），实现不同视觉效果。
transform: rotate(360deg)
transform-origin 调整旋转中心点background-position 实现动效，但 transform 更适合纯旋转基本上就这些。利用 :hover 触发 ::before 的 transform，就能轻松做出动态前置图标效果，不复杂但很实用。
以上就是css元素hover时前置装饰符号旋转如何实现_使用::before和transform结合:hover的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
266
收藏
