ナビゲーションでよく見かけるものです。

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