如何通过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;}