css3遷移に下線を引く

Question

CSS3でhoverに下線アニメーションを左から右に作成するにはどうすればよいですか？

Answer 1

これは本当にトリッキーな質問でした。

私が思いつくことができる唯一の解決策は、border-bottom オン :hoverまたは私は実際に移行していると言う必要がありますborder-bottom、widthおよびmargin-rightを作成するにはborder-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;
}