下線のリンクは最近、非常に単純な視覚効果は非常に良いですが、あなたは下のリンクを見ることができます作られた、非常に一般的なスタイルです。
http://jsbin.com/zanewe/edit?html,css,output
この効果を作成することは非常に簡単です、あなたはDOM HTMLに追加要素を追加する必要はありませんが、ブラウザの旧バージョンでは、ブラウザの互換性の問題を考慮する必要があり、それだけで通常の下線付きで表示されます。
まあ、今正式に開始。私たちが行う必要がある最初の事は、テキスト装飾を削除し、相対的な位置へのリンクを設定することです。私たちは、ホバー、h2は、我々は例を取るどこときに、リンクの色が変化しないことを確認する必要があります。
h2 > a {
position: relative;
color: #000;
text-decoration: none;
}
h2 > a:hover {
color: #000;
}
次に、我々はそれを非表示を変更することで、境界線を追加します。挿入:before
し、それを設定しscaleX(0)
、あなたのブラウザがサポートされていない場合は、保守的で、私たちはvisibility: hidden
それを隠します。
h2 > a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
最後にアニメイト時0.3s
、今はただの要素が設定する必要がhover
表示さscaleX(1)
:
h2 > a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
私たちは完了です。??????
これは非常にダイナミックなアニメーションアンダースコアを完了します