html - 悬停链接边框动画

Question

我想知道当我将鼠标悬停在链接上时如何为链接设置动画。我希望顶部边框向下移动，底部边框向上移动。当动画结束时，边框应该消失。当我将鼠标悬停在链接上时，边框应该会出现并显示动画。

HTML：

<ul>
    <li class="active"><a href="/index">Home</a></li>
    <li><a href="/about">About Me</a></li>
    <li><a href="/passion">My Passion</a></li>
</ul>

CSS：

ul li a {
    border-bottom: 3px transparent solid;
    border-top: 3px transparent solid;
}
ul li a::before {
    position: absolute;
    left: 0;
    top: 0;
    visibility: hidden;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

ul li a::after {
    position: absolute;
    left: 0;
    top: 100%;
    visibility: hidden;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
ul li a:hover {
    color: blue;
}
ul li a:hover::before {
    visibility: visible;
    top: 100%;
    background: blue;
}
ul li a:hover::after {
    visibility: visible;
    top: 0;
    background: blue;
}

预期结果：

标签： htmlcss

Answer 1

---html---

<a href="#about"><span class="a-border" onclick="menuclick(this)">ABOUT US</span></a>
<a href="#creater"><span class="a-border" onclick="menuclick(this)">CREATERS</span></a>
<a href="#news"><span class="a-border" onclick="menuclick(this)">NEWS</span></a>
<a href="#contact"><span class="a-border" onclick="menuclick(this)">CONTACT</span></a>

---css---

a {
    text-decoration: none;
}
a:hover {
    cursor: pointer;
}
.a-border {
    display: inline-block;
    position: relative;
    color: white;
    padding: 0.5rem 0.25rem;
    margin: 0 1.5rem;
    overflow: hidden;
}
.a-border::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -8px;
    left: -3%;
    width: 106%
    border-top: 2px solid white;
    transform: scale(0, 1);
    transform-origin: 0% 100%;
    transition: transform 0.4s;
}
a:hover .a-border::after {
    transform:scale(1, 1);
}
a.focused .a-border::after {
    transform: none;
}

---js---

function menuclick(underline) {
    var focused = document.getElementsByClassName("focused");
    var i;
    for (i = 0; i < focused.length; i++) {
        var under = focused[i];
        if (under.classList.contains('focused')) {
            under.classList.remove('focused');
        }
    }
    if (!underline.parentElement.classList.contains('focused')) {
        underline.parentElement.classList.add('focused');
    }
}