css - css3 遷移に下線を引く

Question

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

Answer 1

これは本当に難しい質問でした。

私が思いつく唯一の解決策は、border-bottomを onに移行するか、実際には移行中と: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;
}