Html 边框底部从左到右

我正在尝试从左到右转换边界底部。我不太确定如何继续做下去，尝试了不同的方法，但还没有真正弄明白

到目前为止，我

.menu-text {
font-size: 1em;
height: 120px;
margin-top: -10px;
background: #334960;
padding-right: 35px;
color: #FFF;
text-decoration: none;  
line-height: 125px;
display: inline-block;
cursor: pointer;
transition: all ease-in-out .2s;
border-bottom: 10px solid #334960;
}

.menu-text:hover {
border-bottom: 10px solid #FFF;
}

---

非常感谢您的帮助，提前谢谢。

您不能以这种方式设置边框动画。必须在之后使用伪元素

。从左到右设置此元素宽度的动画

.menu-text {
    font-size: 1em;
    height: 120px;
    margin-top: -10px;
    background: #334960;
    padding-right: 35px;
    color: #FFF;
    text-decoration: none;  
    line-height: 125px;
    display: inline-block;
    cursor: pointer;
}
.menu-text:after {
    transition: all ease-in-out .2s;
    background: none repeat scroll 0 0 #ffffff;
    content: "";
    display: block;
    height: 2px;
    width: 0;
}
.menu-text:hover:after {
    width: 100%;
}

不能以这种方式设置边框动画。必须在

之后使用伪元素

。从左到右设置此元素宽度的动画

.menu-text {
    font-size: 1em;
    height: 120px;
    margin-top: -10px;
    background: #334960;
    padding-right: 35px;
    color: #FFF;
    text-decoration: none;  
    line-height: 125px;
    display: inline-block;
    cursor: pointer;
}
.menu-text:after {
    transition: all ease-in-out .2s;
    background: none repeat scroll 0 0 #ffffff;
    content: "";
    display: block;
    height: 2px;
    width: 0;
}
.menu-text:hover:after {
    width: 100%;
}

从左到右的过渡是什么意思？@像香蕉一样的滑动效果，边框从左开始，然后过渡到右，而不是从下到上从代码中我看到你只在悬停时更改颜色，你想让边框从左到右渐变颜色，直到还是类似的效果？@香蕉否，我希望边框以渐变方式显示，就像从2px到100px的过渡。你说的从左到右的过渡是什么意思？@Banana就像一个滑动效果，边框从左开始，然后过渡到右，而不是从代码的底部到顶部。我看到你只在悬停时更改颜色，您想让边框从左到右渐变颜色，直到或类似的颜色吗？@Banana不，我想让边框渐变显示，就像从2px过渡到100px一样。@AndreasEilertsenLybo您正在使用哪个浏览器？你的身体背景颜色必须和白色不同。检查此fiddle@AndreasEilertsenLybo您正在使用哪个浏览器？你的身体背景颜色必须和白色不同。检查这把小提琴