css - 在单元格上方移动背景效果。

Question

不久之前，在 SO 的大力帮助下，我能够创建一种效果，其中鼠标悬停在背景上会产生动画下划线效果:

.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;
}