はじめに
・自分自身の備忘録として書きます。
・間違いなどあればご指摘いただけますと幸いです。
こんな感じ
https://gyazo.com/a02da2706b969203c369281f69f251d6
コードはこんな感じ
a{color:#707070;position:relative;text-decoration:none;}a:before{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:1px;background:#555;transform:scale(0,1);transform-origin:left;transition:0.5s;}a:hover{color:#101010;}a:hover:before{transform:scale(1);}transform-origin: left;を指定しない場合、中心から左右に向かってアンダーラインが出ますheight: 1px;はアンダーラインの太さです
※hoverした時に文字色が変わるようにしていますが、これはアンダーラインと関係ない部分です