ナビゲーションでよく見かけるものです。
transform-origin を left や right に変更すれば動きが変わります。
a{ color:#333; display:inline-block; position:relative; text-decoration:none; } a:before{ background:#c00; content:''; height:2px; width:100%; position:absolute; left:0; bottom:-3px; transform:scale(0,1); transform-origin:center; transition:.6s; } a:hover:before{ transform:scale(1); }