Плавное увеличение нижнего подчеркивания у текста

.link{ 
   text-decoration:none; 
   position:relative; 
} 
 
.link:before{ 
   position:absolute; 
   bottom: -10px; 
   content: " "; 
   border-bottom: 1px solid #ccc; 
   transform: scale(0,1); 
   width:100%; 
   transition: transform 0.3s 
} 
 
.link:hover:before{ 
   transform: scale(1,1); 
}

<a class='link' href='#'>Ссылка</a>

.link{ 
   text-decoration:none; 
   position:relative; 
} 
 
.link:before{ 
   position:absolute; 
   bottom: -10px; 
   content: " "; 
   border-bottom: 1px solid #ccc; 
   left:50%; 
   width:0%; 
   transition: all 0.3s; 
} 
 
.link:hover:before{ 
   width:100%; 
   left:0% 
}

<a class='link' href='#'>Ссылка</a>