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

2018年1月30日

 

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

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