Animating the `content` Property

Did you know that you can animate the content property of pseudo elements? According the list of animatable properties in the spec, you shouldn’t be able to, but in the latest version of desktop Chrome you can. The demo below should animate from “A” to “B” by changing the content property inside a @keyframes animation:

The code

To make a letter-switching demo like above, we make an empty <div> that we’ll fill with the content of its pseudo element, like so:

<div class="letter-changer"></div>

And then we set the content of its pseudo element to change as we might any other CSS property, by making a new @keyframes animation and setting it up with the animation property:

@keyframes changeLetter {
  0% {
    content: "A";
  }
  50% {
    color: white;
  }
  100% {
    content: "B";
  }
}

.letter-changer::after {
  animation: changeLetter 3s linear infinite alternate;
}

Could this be useful?

The fact that it doesn’t work in most browsers and is non-standard makes it a bit risky to use. But there is that whole paving-cowpaths thing (i.e. if it’s clearly useful it could be standardized).

In a post last week I described a method for incrementing the numbers inside a loading bar. It used this very concept to increment the numbers. Here’s another example in that vein: a countdown!

Browser support

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.

It might be a handy trick in some distant future or it might never be supported by anything. Non-standard features are always at least at some risk of being deprecated, so this Chrome support may not last forever.

Peaking at browser support for this again in September 2017: Works in Chrome/Mobile, Firefox, and Opera, but not in IE, Edge, or iOS.

Peaking at browser support for this again in October 2020: Edge went Chrome, so that’s solved. IE support is getting rarer and rarer. Still no iOS support.

If you need to change content in a cross-browser friendly way

Use JavaScript.