テキストリンクのホバー時にボーダーが中央から両端に伸びる

最終更新日: 2019年02月06日

CSS・SCSS・Compass

ポイントはa::afterのleft: 50%; と a:hover::afterのtransform: translateX(-50%); でしょうか。

ul li a{
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-transition: .2s;
  transition: .2s;
}

ul li a::after{
  position: absolute;
  bottom: 0;
  left: 50%;
  content: "";
  width: 0;
  height: 8px;
  background-color: #620f90;
  -webkit-transition: .2s;
  transition: .2s;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

ul li a:hover::after{
  width: 100%;
}

ul li a{

display: block;

width: 100%;

height: 100%;

position: relative;

-webkit-transition: .2s;

transition: .2s;

}

ul li a::after{

position: absolute;

bottom: 0;

left: 50%;

content: "";

width: 0;

height: 8px;

background-color: #620f90;

-webkit-transition: .2s;

transition: .2s;

-webkit-transform: translateX(-50%);

transform: translateX(-50%);

}

ul li a:hover::after{

width: 100%;

}

テキストリンクのホバー時に使えるエフェクト・デザインサンプル 15 – NxWorld

コメントをするコメントをキャンセル

コメントはありません。

テキストリンクのホバー時にボーダーが中央から両端に伸びる

コメントをする コメントをキャンセル

コメント

コメントをするコメントをキャンセル