css animation on “content:” doesn't work on Safari and Firefox

Question

I have an animation set on :before that works fine on Chrome but it doesn\'t work on Safari (IOS9 iPhone or 9 - El Capitan) neither on Firefox.

Answer 1

I also gone through the entire web I didn't found any thing, according to the following reference we can only achieve with JavaScript.

In my own testing animating content has only worked in stable desktop Chrome (v46 at time of writing). No support anywhere else. No Safari on desktop or iOS. No Firefox. No IE. Each of these browsers will ignore the animation, showing only the original content in the pseudo element.

Reference