CSSでアンダーラインアニメーション

マウスが乗るとアンダーラインが出現するアニメーション。
*Gif画像の黒い線はソースコードとは関係ないです。

左から右へ

<p class="text">Underline Left</p>

.text{
  position: relative;
  display: inline-block;
  font-size: 2em;
}

.text:before{
  position: absolute;
  top: 1.3em;
  left: 0;
  content: "";
  display: inline-block;
  width: 0;
  height: 2px;
  background: #34BBF3;
  transition: 2s;
}

.text:hover:before{
  width: 100%;
}

右から左へ

<p class="text">Underline Right</p>

.text{
  position: relative;
  display: inline-block;
  font-size: 2em;
}

.text:before{
  position: absolute;
  top: 1.3em;
  right: 0;
  content: "";
  display: inline-block;
  width: 0;
  height: 2px;
  background: #34F300;
  transition: 2s;
}

.text:hover:before{
  width: 100%;
}

.text:beforeにright: 0;と指定する

中央から左右へ

<p class="text">Underline Center</p>

.text{
  position: relative;
  display: inline-block;
  font-size: 2em;
}

.text:before,
.text:after{
  position: absolute;
  top: 1.3em;
  content: "";
  display: inline-block;
  width: 0;
  height: 2px; 
  background: #F30034;
  transition: 2s;
}

.text:before{
  left: 50%;
}

.text:after{
  right: 50%;
}

.text:hover:before,
.text:hover:after{
  width: 50%;
}

アンダーライン グラデーション

コードは流用できます。
background を 下記のように変更すればできます。

background: 
    linear-gradient(to right,
      dodgerblue, crimson, yellowgreen, orange, purple, red);