マウスホバーで下線が伸びてくるシンプルなアニメーションエフェクト

Result

よく見かけますね。疑似要素を使います

css

h1 {/*基本設定*/
  text-align: center;
  font-size: 48px;
  letter-spacing: 3px;
  color: #222;
  margin: 20px 0;
}
.underline {
  position: relative;
}
.underline:hover,
.underline:focus,
.underline:active {
  cursor: pointer;
}

.underline:after {/*疑似要素とアニメーション設定を加えてwidthを0にしておく*/
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  height: 3px;
  background-color: #000;
  width: 0;
  transition: width .4s;
}

.underline:hover:after,
.underline:focus:after,
.underline:active:after {/*ホバーしたら100%の位置まで伸びる*/
  width: 100%;
}

html

<h1 class="underline">かちびと.net</h1>

via

underline effect