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;     display: block;     -webkit-transition: all 1s ease-in-out;     -moz-transition: all 1s ease-in-out;     -o-transition: all 1s ease-in-out; }  #foo:hover:after {     width: 250px;     height: 250px; } 

Is this even possible? I've been testing and so far I can't seem to find a solution. I'm trying to trim down the amount of JavaScript support I need by using Modernizr.

I already have a JavaScript method, so please no JavaScript alternatives.

Demo: http://jsfiddle.net/MxTvw/

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.