CSS或jQuery滑动边框底部

以下是我所拥有的：

我试图使边界底部滑动，当我悬停在2-5时，从蓝色变为红色。我从来没有使用过jQuery，所以我希望它可以只使用CSS。提前谢谢

HTML:

---

您可以通过css3转换来实现这一点。 将跨度标记添加到a标记中

<li><a href="1.html" class="button" id="current">1 <span class="border"></a></span></li>
<li><a href="2.html" class="button">2 <span class="border"></a></span></li>

---

我想你明白了。请根据需要更改css。谢谢。

您的CSS工作正常。那么，你想让我们做什么？我想让边框底部滑动。你想滑动什么？有两个边框底部，一个是红色的悬停，另一个是蓝色的当前选中的，你想在单击另一个时蓝色条滑动吗？是的，我想在我悬停在另一个时蓝色条滑动（如果可能，将颜色更改为红色）。查找类似以下内容：

li {
display: inline;
}

.button {
padding: 5px 35px 5px 35px;
background-color: transparent;
text-decoration: none;
}

.button:hover {
color: #d0332b;
border-bottom: 7px solid #d0332b;
}

#current {
border-bottom: 7px solid #09C;
color: #09C;
}

<li><a href="1.html" class="button" id="current">1 <span class="border"></a></span></li>
<li><a href="2.html" class="button">2 <span class="border"></a></span></li>

li {
    display:inline-block;
    width:150px;
    overflow:hidden;
    position:relative;
    height:20px;
}
li span.border{
    height:5px;
    width:150px;
    left:-150px;
    background:green;
    position:absolute;
     -moz-transition: all 0.8s ease;
    -webkit-transition: all 0.8s ease;
    bottom:0;
}
li a#current span.border{
    left:0;
    background:red;
}
li:hover span.border{
    left:0;
}