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

css css-transitions pseudo-element
daryl picture daryl · Oct 18, 2011 · Viewed 40.8k times · Source

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

Litek picture Litek · Oct 18, 2011

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.

Related questions

Transition only for the border on hover, but not for background

Here I have some CSS: #image-edges-beneath:hover{ background-color: blue; } #image-edges:hover{ background-color: blue; } #image-edges-beneat:hover:after{ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; border: 2px solid #F1…

Read More
CSS Transitions with :before and :after pseudo elements

Can't seem to animate pseudo elements with -webkit-transition. The fiddle below shows what I mean when run in Chrome/Safari, I guess this isn't supported right now? http://jsfiddle.net/4rnsx/130/

Read More
Transitions on the CSS display property

I'm currently designing a CSS 'mega dropdown' menu - basically a regular CSS-only dropdown menu, but one that contains different types of content. At the moment, it appears that CSS 3 transitions don't apply to the 'display' property, i.e., you …

Read More