Animate the CSS transition property within :after/:before pseudo-classes

Question

Is it possible to animate CSS pseudo-classes?

Say I have:

#foo:after {
    content: \'\';
    width: 200px;
    height: 200px;
    background: red;
          


        

Answer 1

Your fiddle does work for me in Firefox. And as far as I know, and if this article is up to date this is the only browser that can animate pseudo-elements.

---

EDIT: As of 2016, the link to article is broken and the relevant WebKit bug was fixed 4 years ago. Read on to see other answers, this one is obsolete.