下划线css3过渡 [英] Underline css3 transition

问题描述

如何在CSS3中 hover 上从左到右创建下划线动画

How do I create an underline animation from left to right on hover in CSS3?

推荐答案

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

This was a really tricky question.

我能想出的唯一解决方案是在上转换 border-bottom ：hover 或者我应该说我正在转换 border-bottom ， width 和 margin-right 以使 border-bottom 出现，同时保留对齐。

The only solution I can come up with is to transition a border-bottom on :hover or I should actually say that I'm transitioning border-bottom, width and margin-right to make the border-bottom appear and at the same time keep, in this case, the links aligned.

很难解释，所以我做了一个快速示例，这不是完美的，看起来有点凌乱，但至少它显示了我的意思。 ： - ）

Hard to explain, so I made a quick example which isn't perfect and looks a bit messy, but at least it shows how I mean. :-)

FIDDLE

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

这篇关于下划线css3过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！