CSSでホバー時にアンダーラインをアニメーションさせる方法

今回はマウスがホバーするとアンダーラインがアニメーションしながら出現するCSSコードを紹介します。コピペokです。

 

左から右

HTML

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

 

CSS

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

 

アンダーラインはposition: absoluteで文字の下に配置しておきます。今回は左から右へアニメーションしたいのでleft: 0で左下に配置しておきましょう。

通常時はwidth: 0で見えない状態で置いておきます。heightはアンダーラインの太さになります。

ここからホバーしたときにwidth: 100%にしてアンダーラインが表示されるようにします。

アニメーションにするのでtransitionも指定する必要があります。

 

右から左

HTML

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

 

CSS

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

 

アンダーラインの初期位置をright: 0で右に指定しただけです。

あとはマウスホバー時にwidth: 100%にしてtransitionを指定すれば右から左へアニメーションしながらアンダーラインが出現します。

 

中央から両端

HTML

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

 

CSS

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

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

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

 

margin: 0 autoを指定してアンダーラインを中央揃えに配置します。

あとはwidth: 100%とtransitionを指定すれば中央から左右にアンダーラインがアニメーションします。

 

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

アンダーラインにbackground: linear-gradientを指定するとグラデーションがかかったアンダーラインを作ることができます。

アニメーションしながら表示されていくので徐々にグラデーションが見えてくるという感じが面白いです。使いどころがあるかはわかりませんが…

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