CSSでマウスオーバーした時にうにょーんって下線が伸びるようにする

 

cssでマウスオーバした時に下線 をうにょーんってさせるアニメーションです。

See the Pen gXoVEX by version1 (@version1) on CodePen.

それぞれ、Spring,Summer,Autumn,Winterの文字の 上にマウスを当てるとアンダーラインが引かれるようになっています。

demoにはcodepenを利用しています。 興味ある方はこちらもどうぞ CodePen – webサービスのデザインを考えるときにおすすめの海外サイト  

 

cssについて、 簡単に説明すると肝になっているのは、

.list-item::after{
   content: '';
   display:block;
   width:0;
   margin: 6px auto 0;
   border-bottom: 1px solid  white;
   transition: width 0.3s ease-in-out;
}

.list-item:hover::after{
  width: 100%;
}

ここの部分です。

 

 

 

 

after擬似要素で見えない下線を指定する

 

まずは、 :after擬似要素で、それぞれSpringなど季節の 文字の後にwidth:0で下のボーダーだけが存在する要素を 入れ込みます。

その後に、 .list-item:hover::afterで マウスオーバーされた時のスタイルを指定して いきます。 ここではwidth:100pxが指定させているので、 下線が表示されるようになります。

 

transformでうにょーんを表現する

 

注意点として、 transitionで最初borderのwidthが0である部分から、 マウスオーバーされてwidthが100%になるまでの、 時間を指定する必要があります。

この例では、 0.3秒かけて変化させるという指定を 行なっているので、 実際のサンプルのような動きになります。 (指定しないといきなり下線が表示される感じになります。)

 

aタグをinline-blockで指定する

 

また、 aタグでdisplay:inline-blockを 指定していますが、

a {
  color:white;
  display: inline-block;
  font-size:30px;
  text-decoration:none;
}

これを指定しないと、 文字幅でなく、画面の横幅全体に下線が 広がってしまうので注意してください。