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

Question

Here is my (simplified) situation:

http://jsfiddle.net/qFhaq/

Clicking the button launches an animation that expands the height of the div. While the div is expanding, 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's visible throughout the animation?

Answer 1

Add "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 fast, for better 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/