如何在悬停时让链接下方的下划线淡入淡出？

Question

如果悬停在下面视频中的链接上，我如何淡化下划线？

我使用开发者控制台找到了这个CSS，但我无法弄清楚它是如何工作的。

.mainContent p>a:hover::after, .mainContent li>a:hover::after, .mainContent .text a:hover::after, .mainContent p>a:focus::after, .mainContent li>a:focus::after, .mainContent .text a:focus::after {
    opacity: 1;
    -webkit-transform: translateY(-2px);
    -moz-transform: translateY(-2px);
    transform: translateY(-2px);
}
.mainContent p>a::after, .mainContent li>a::after, .mainContent .text a::after {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(226,0,26,1);
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.15s,-webkit-transform 0.2s;
    -moz-transition: opacity 0.15s,-moz-transform 0.2s;
    transition: opacity 0.15s,transform 0.2s;
    -webkit-transform: translateY(4px);
    -moz-transform: translateY(4px);
    transform: translateY(4px);
}

HTML

<a href="http://www.google.de" target="_blank">Hallenplan</a>

这是如何工作的，还有更好的方法吗？

Answer 1

要做到这一点，你需要做两件事：

• 提供a position属性
• 通过after将position: absolute元素置于底部，然后transform来为其a { position: relative; text-decoration: none; } a:hover::after, a:focus::after { opacity: 1; transform: translateY(-2px); } a::after { position: absolute; top: 100%; left: 0; width: 100%; height: 1px; background: black; content: ''; opacity: 0; transition: opacity 0.2s, transform 0.2s; transform: translateY(4px); }元素设置动画。

一种可能的方法是：

＆＃13;

＆＃13;

<a href="http://www.stackoverflow.com">
    StackOverflow
</a>

＆＃13;

// Add Auth State Changed event listener
auth.onAuthStateChanged(user => {
    if (user) {
        self.user = user;
        db.child('referrals').orderByChild("uid").equalTo(user.uid).on("child_added", function (snapshot) {
            if (snapshot.val().status == 0)
                self.submitted++;
            else if (snapshot.val().status == 1)
                self.pending++;
            else if (snapshot.val().status == 2)
                self.approved++;
        });
    } else {
        console.log('not logged in');
        $location.path('').replace();
    }
});

＆＃13;

＆＃13;

＆＃13;