CSS动画和生成的内容不动画

我有一个通过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>

我加了蓝色 outline 确认我是 选择 正确地。为什么CSS生成的内容 不 动画制作和如何修复?

我做了一些测试,发现了一些非常讽刺的结果!

• IE11 作品
• 铬72失效。
• Waterbox 56失败。
• Firefox 66失败。
• Safari 11失败。

关于让“懒惰”浏览器工作的建议?

更新

Bijal使用的答案 display: inline-block; 设法使中心距动画化 然而 它绕着一个圆圈移动,而不是简单地旋转。

如果你申请 background-color 对于伪元素,请注意宽度比预期的要宽(例如,20px中心距的50像素宽度),请使用 text-indent: 0; . 如果您对代码做了一些其他的事情,请进入您的开发人员工具,开始取消选中应用的属性/值对,直到发现问题为止。