javascript - 如何防止 CSS 伪元素在动画期间消失？

Question

这是我的（简化的）情况：

http://jsfiddle.net/qFhaq/

单击该按钮会启动一个扩展 div 高度的动画。当 div 扩展时，:after伪元素（包含文本“look”）消失，然后在动画结束时重新出现。

有没有办法防止伪元素消失，使其在整个动画中可见？

Answer 1

将“溢出”CSS 规则添加到#main 并将其设置为“可见！重要；”

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

Answer 2

我重写了它，它使用了 CSS3 过渡：

JS（为了快速，为了更好，你可以将其更改为 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/