Subrayar el tema del laboratorio de diseño de transición CSS

Un fácil efecto de enlace de animación visual CSS: en el momento en que pasa el cursor sobre un link de artículo, el subrayado del link se muestra animándolo desde el centro.

Esta transición CSS subrayada no necesita ningún elemento DOM o js adicionales.

Subrayar la transición de CSS

a.animating-backlink 
position: relative;
color: #000;
text-decoration: none;

a.animating-backlink:hover 
color: #000;

a.animating-backlink:before 
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;

a.animating-link:hover:before 
visibility: aparente;
-webkit-transform: scaleX(1);
transform: scaleX(1);

mantente listo: Los navegadores que no admiten la animación CSS solo detallan un subrayado normal.

Asociar: Http://tobiasahlin.com/blog/css-trick-animating-link-underlines/