如何通过jquery或css3的方法给after伪元素产生动画？

Question

<div class="ani"></div> .ani{position:relative;width:100px;height:100px;background:red;} .ani:before{   content:"";  position:absolute;  width:100px;  height:100px;  background:rgba(0,0,0,.5);   top:0;   left:0; }我想给after伪元素的height 从 100px 变化到 0，产生一个很简单的动画效果？不知道该如何去做？

Answer 1

.ani{position:relative;width:100px;height:100px;background:red; }

.ani:before{

  content:"";

  position:absolute;

  width:100px;

  height:100px;

  background:rgba(0,0,0,.5);

  top:0;

  left:0;

  transition:all 0.5s;

}

.ani:hover:before{

    height:0;

}