CSS hover 时前置装饰符号如何旋转？使用 ::before + transform 的完整实现方案

方案概述

目标效果

在网页交互设计中，前置装饰符号常用于提示性说明。通过使用::before伪元素，可以实现文本前的装饰符号，提升可读性与导航性。

通过结合hover状态与transform，可以实现符号在不改变文本排布的情况下进行旋转动画，带来直观的视觉反馈。

核心要点

::before伪元素负责绘制前置符号，使文本结构保持简洁；transform用于旋转动画，transform-origin设定旋转中心，transition控制动画平滑性。

为了良好体验，应确保旋转只影响符号本身，不影响文本的布局和对比度，使用无障碍友好的聚焦样式与键盘可访问性。

HTML 结构与基础实现

结构要点

最常用的方案是将符号放在::before伪元素中，并让文本文本位于后续的内容中。这样的实现可以使符号独立于文本进行旋转，且不会打断文本的排版。

在实际应用中，推荐使用可点击的元素（如或）并保留文本节点以便屏幕阅读器读取，确保无障碍性与语义清晰。

<a href="#" class="rotator" aria-label="查看详情">查看详情</a>

CSS 结构设计

为实现视觉效果，需要为前置符号设置display、alignment、gap等，使符号与文本保持整齐的水平排列。

在hover状态下，触发transform旋转，同时通过transition实现流畅的过渡。

.rotator {display: inline-flex;align-items: center;text-decoration: none;color: #333;
}
.rotator::before {content: "➜";display: inline-block;margin-right: .5em;transition: transform .25s ease;transform-origin: center;
}
.rotator:hover::before {transform: rotate(90deg);
}

完整实现方案与示例

完整交互示例与要点

下面的示例展示了一个完整的实现，包含HTML与CSS，演示了在悬停时前置符号的旋转效果，以及文本的稳定性。

通过使用自定义属性，你可以轻松修改符号、角度以及动画时长，以适应不同的设计风格。

查看详情

:root{--gap: .6em;--rotate: 90deg;--duration: .25s;
}
.rotator{display: inline-flex;align-items: center;gap: var(--gap);color: #1a1a1a;text-decoration: none;
}
.rotator::before{content: "➜";display: inline-block;margin-right: .5em;transition: transform var(--duration) ease;transform-origin: center;
}
.rotator:hover::before{transform: rotate(var(--rotate));
}
.rotator:focus-visible{outline: 2px solid #4d90fe;outline-offset: 2px;
}