使下划线在悬停链接下拍摄

Make underline shoot under link on hover

本文关键字：链接 悬停 下划线      更新时间：2023-09-26

我正在寻找一种方法，使一个下划线拍摄横跨一个链接时，鼠标在不悬停时再次消失。我不确定我是否解释得很好，所以如果你不明白请告诉我。我很确定这不能用一个实际的下划线来完成，也许用一个<hr>标签?任何帮助都是感激的!

a {
    text-decoration: none;
    display: inline-block;
    border-bottom: 1px solid blue;    
    margin-right: 39px; 
    width: 0px;
    -webkit-transition: 0.5s ease;
            transition: 0.5s ease;
}
a:hover {
    -webkit-transition: 0.5s ease;
            transition: 0.5s ease;
    border-bottom: 1px solid blue;
    width: 30px;
    margin-right: 9px;
}

从这里开始:下划线css3过渡

这是一个非常简单的CSS:

a {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

但这只是一个悬停效果，如果你想要一个过渡，那么上面的答案应该工作

相关文章：