Webmasters Gallery

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!

See the Pen Tick tick boom! by Robin Rendle (@robinrendle) on CodePen.

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.

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

Use JavaScript.

---

Animating the `content` Property is a post from CSS-Tricks