特定の要素に下線が引かれるようなアニメーションを追加したいとき。
<p class="hoge">この下に下線を表示</p>
左から右へ下線が表示されるアニメーション
.hoge{ position: relative; display: inline-block; font-size: 2em; } .hoge:before{ position: absolute; top: 1.3em; left: 0; content: ""; display: inline-block; width: 0; height: 2px;//線の厚み background: #000;//線の色 transition: 2s; } .hoge:hover:before{ width: 100%; }
右から右へ下線が表示されるアニメーション
.hoge{ position: relative; display: inline-block; font-size: 2em; } .hoge:before{ position: absolute; top: 1.3em; right: 0; content: ""; display: inline-block; width: 0; height: 2px;//線の厚み background: #000;//線の色 transition: 2s; } .hoge:hover:before{ width: 100%; }
中央から左右へ下線が表示されるアニメーション
.hoge:before, .hoge:after{ position: absolute; top: 1.3em; content: ""; display: inline-block; width: 0; height: 2px;//線の厚み background: #000;//線の色 transition: 2s; } .hoge:before{ left: 50%; } .hoge:after{ right: 50%; } .hoge:hover:before, .hoge:hover:after{ width: 50%; }