Html CSS过渡下划线显示

我正在尝试做一个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;
}

如何修改此选项以创建悬停时从下到上显示的下划线

我感谢你的帮助

---

谢谢

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

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

---

另一个版本几乎是：）如果我没有正确描述，我很抱歉。鼠标悬停时，下划线应从下往上延伸（变粗）到文本的起始位置。所以它从字母的底部一直增长到底部。这有意义吗？我找到了解决办法。我会检查你的答案是否正确，因为它基本上满足了我的要求。谢谢