<分区>
我有一个通过 Unicode 编码的齿轮图标，我试图让它在 focus 和 hover 事件上旋转。
@keyframes spin
{
0 {transform: rotate(0deg);}
100% {transform: rotate(359deg);}
}
a[title*='important']::after {content: '\2699';}
a[title*='important']:hover::after
{
animation: spin 5s infinite;
outline: #00f solid 2px;
}<a href="#" title="important">link</a>我添加了蓝色的轮廓以确认我选择是正确的。为什么 CSS 生成的内容没有动画，我该如何解决？
我做了一些测试，发现了一些非常讽刺的结果!
- IE11 有效
- Chrome 72 失败。
- Waterfox 56 失败。
- Firefox 66 失败。
- Safari 11 失败。
关于让“懒鬼”浏览器正常工作的建议？
更新
bijal 的答案是使用 display: inline-block; 设法为齿轮设置动画但是它绕着圆圈移动而不是简单地旋转。
如果您将 background-color 应用于伪元素并注意到宽度比您预期的要宽(例如，50 像素宽度对应 20px 齿轮)使用 text-indent : 0;。如果您对代码进行了一些其他操作，请进入您的开发人员工具并开始取消选中已应用的属性/值对，直到问题被发现。