How can I prevent CSS pseudo-elements from disappearing during animation?

Question

Here is my (simplified) situation:

http://jsfiddle.net/qFhaq/

Pressing the button starts an animation that extends the height of the div. As the div expands, the :after pseudo-element (containing the text “look”) disappears and then reappears at the end of the animation.

Is there a way to prevent the pseudo-element from disappearing so that it is visible throughout the animation?

Answer 1

Add the overflow CSS rule to #main and set it to "visible! Important;"

 #main{ width: 200px; height: 200px; background-color: #eee; border: 1px solid black; overflow:visible !important; } 

Answer 2

I rewrite it that it used CSS3 transition:

JS (for quick so you can change it to vanilla js):

 $(function(){ $("#clicky").click(function(){ $("#main").addClass('animate'); }); }); 

CSS

 #main{ width: 200px; height: 200px; background-color: #eee; border: 1px solid black; -webkit-transition: height 2s linear; } #main:after{ content: "look"; height: 50px; background-color: white; margin-left: 210px; border: 1px solid black; } #main.animate{ height: 500px; } 

http://jsfiddle.net/qFhaq/1/