CSS 过渡下划线显示

Question

我正在尝试进行 CSS 过渡，当您将鼠标悬停在 href 元素上时，下划线会从下到上出现。

我找到了这个示例，它创建了一个悬停时从左到右出现的下划线。

a {
    text-decoration: none;
    border-bottom: 1px solid blue;    
    margin-right: 39px; 
    width: 0px;
    -webkit-transition: 0.3s ease;
            transition: 0.3s ease;
}

a:hover {
    -webkit-transition: 0.3s ease;
            transition: 0.3s ease;
    border-bottom: 1px solid blue;
    width: 30px;
    margin-right: 9px;
}

如何修改才能创建悬停时从下到上显示的下划线？

感谢您的帮助，

谢谢

Answer 1

我希望这个动画使用 css 个关键帧满足您的需求：

Live Demo

CSS

a {
    text-decoration: none;     
    margin-right: 39px; 
    width: 0px;
    -webkit-transition: 0.9s ease;
            transition: 0.9s ease;
}



a:hover span{
    position: absolute;
    top: 24px;
    border-top: 1px solid blue;
    width: 120px;
    margin-right: 9px;
    -webkit-animation: mymove infinite 1s alternate;
    -o-animation: mymove infinite 1s alternate;
    animation: mymove infinite 1s alternate;
    -webkit-transition: 0.9s ease;
            transition: 0.9s ease;

}

@-webkit-keyframes mymove {
    from {top: 24px;}
    to {top: 9px;}
} 

/* Standard syntax */ 
@keyframes mymove {
    from {top: 24px;}
    to {top: 9px;}
}

另一个版本Live Demo

CSS 过渡下划线显示

CSS transition underline reveal

html

css