CSS3で要素の下部にラインアニメーションを表示させる方法

Tweet

Pocket

特定の要素に下線が引かれるようなアニメーションを追加したいとき。

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