Question

我正试图从左到右过渡边框底部。我不太确定如何继续这样做，并尝试了不同的东西，但还没有真正接近搞清楚。

到目前为止我已经

了

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

我感谢您提供的任何帮助，提前谢谢。

Answer 1

您无法以此方式为边框设置动画。您必须使用伪元素after。从左到右为此元素的宽度设置动画！

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

边框从左到右

1 个答案: