您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

带下划线的CSS3过渡

带下划线的CSS3过渡

这是一个非常棘手的问题。

唯一的解决办法我能想出是过渡border-bottom:hover或我其实应该说我过渡border- bottomwidthmargin-rightborder-bottom出现,并在同一时间保持,在这种情况下,链接对齐。

很难解释,所以我举了一个简短的例子,它并不完美,看起来有些混乱,但至少可以说明我的意思。:-)

HTML

<a href="#">Link</a><a href="#">Link</a>

的CSS

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;
}
CSS 2022/1/1 18:23:40 有346人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶