CSS Animation and Generated Content not animating

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.

maybe this article can help you [https://css-tricks.com/transitions-and-animations-on-css-generated-content/](https://css-tricks.com/transitions-and-animations-on-css-generated-content/) — Sfili_81, May 02 '19 at 06:31
@Sfili_81 Nope, the animation is *not* on CSS generated content and the page only makes *claims*. I updated my question, now I sigh and presume I need to find a work around for something that should be universally supported. -_- — John, May 02 '19 at 06:33
here is a related question where you can udjust line-height to get a perfect rotation: https://stackoverflow.com/a/54670339/8620333 — Temani Afif, May 02 '19 at 08:26

score 2 · Accepted Answer · answered May 02 '19 at 06:39

2

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;
    }

answered May 02 '19 at 06:39

Bijal Patel

210
1
3

I can only respond with an image: https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia1.tenor.com%2Fimages%2Fcc51f2a4f411efa5c8d5b5ca6c325b48%2Ftenor.gif%3Fitemid%3D3846355&f=1 – John May 02 '19 at 06:44

score 2 · Answer 2 · answered May 02 '19 at 06:48

2

I have done some chnages and created a pen, please check

Animation on hover

answered May 02 '19 at 06:48

Amarjit Singh

1,152
7
12

Yes, there is an issue where the element does some wonky stuff...your suggestion seems to iron that issue out though give me a little while and I'll see how we can adjust it to really keep the cog in a set location while *still* rotating it. :-) – John May 02 '19 at 06:55
If you have a `background-color` and notice a bunch of space (e.g. a 50px width for a 20px cog) use the following `text-indent: 0 !important;` so your suggestion helped my thinking in that direction, thank you! – John May 02 '19 at 07:02
I used `line-height` it makes some affect. you can check the link again. – Amarjit Singh May 02 '19 at 07:14
Also for browser comparability please use `-webkit-` `-moz-` prefix. – Amarjit Singh May 02 '19 at 07:18

CSS Animation and Generated Content not animating

2 Answers2