在细胞上方移动背景效果。

Question

不久之后我得到了一些很好的帮助，我可以创建一个效果，鼠标悬停会使背景产生动画下划线效果：

.box{
    height:30px;
    background-color : white;
}
.simulate_border {
    position : relative;
    height : 35px;
    background: linear-gradient(to right, red 50%, grey 50%);
    background-size: 200% 100%;
    background-position:right bottom;
    transition:all 500ms ease;
}

.simulate_border:hover{
        background-position:left bottom; 
 }

在此处查看：http://jsfiddle.net/9a4MW/

现在我想知道我是否可以做同样但高于内容而不是低于内容。但是，经过多次摆弄不能让效果高于而不是低于？

TIA

Answer 1

只需不同地定位.box：Jsfiddle。

.box {
    height:30px;
    background-color : white;
    position: absolute;
    width: 100%;
    bottom: 0;
}