CSS Animation and Generated Content not animating [duplicate]

Question

I have a cog icon via Unicode and I'm trying to make it spin on focus and hover events.

@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>

I added the blue outline to confirm that I was selecting correctly. Why is the CSS generated content not animating and how do I fix it?

---

I did some testing and found some very ironic results!

• IE11 works
• Chrome 72 fails.
• Waterfox 56 fails.
• Firefox 66 fails.
• Safari 11 fails.

Suggestions on getting the "slacker" browsers working?

---

Update

The answer by bijal to use display: inline-block; managed to animate the cog however it moves around in a circle instead of simply rotating.

If you apply a background-color to the pseudo-element and notice that the width is wider than you expected (e.g. a 50 pixel width for a 20px cog) use text-indent: 0;. If you do some other stuff with your code go in to your developer tools and start unchecking applied property/value pairs until the issue is revealed.

Answer 1

You can use this, try to apply display: inline-block it will work.

    a[title*='important']:hover::after{
      display: inline-block;
      animation: spin 5s infinite; 
      outline: #00f solid 2px;
    }