【CSS】transitionでwidthを変化させたい時に幅が 0px にならない

CSSの「transition」プロパティを使用して、要素の幅を0pxに変化させたいときに、完全に0にならずに、少し残ってしまう場合があります。

原因として、border などを指定している場合があります。

元のCSS



ul.navi li a{
  width: 100%;
  transition: width 0.3s;
}
ul.navi li a:hover::after{
  width:0;
  border: 0; /* ← border:0;を指定する　*/
}

ul.navi li a{

width: 100%;

transition: width 0.3s;

}

ul.navi li a:hover::after{

width:0;

border: 0; /* ← border:0;を指定する　*/

}

border:0;　にしても変わらない場合は、他の原因として、max-width や min-width、paddingなども関係している場合がありますので、それぞれを「0」にしてチェックしてみてください。