Efecto de desplazamiento: expanda el borde inferior

Estoy tratando de obtener un efecto de desplazamiento de transición en el borde que el borde se expande al pasar el mouse.

h1 { color: #666; } h1:after { position: absolute; left: 10px; content: ''; height: 40px; width: 275px; border-bottom: solid 3px #019fb6; transition: left 250ms ease-in-out, right 250ms ease-in-out; opacity: 0; } h1:hover:after { opacity: 1; } 
 

CSS IS AWESOME

Lo he intentado con Jsfiddle

Para expandir el borde inferior al desplazarse , puede usar transform:scaleX'(); ( referencia de mdn ) y transición de 0 a 1 en el estado de desplazamiento.

Aquí hay un ejemplo de cómo se puede ver el efecto de deslizamiento de frontera: Ampliar efecto de desplazamiento de borde

El borde y la transición se configuran en un pseudo elemento para evitar la transición del texto y evitar agregar marcas.
Para expandir el borde inferior desde la izquierda o la derecha, puede cambiar la propiedad del origen de la transformación a la izquierda o derecha del pseudo elemento:

 h1 { color: #666;display:inline-block; margin:0;text-transform:uppercase; } h1:after { display:block; content: ''; border-bottom: solid 3px #019fb6; transform: scaleX(0); transition: transform 250ms ease-in-out; } h1:hover:after { transform: scaleX(1); } h1.fromRight:after{ transform-origin:100% 50%; } h1.fromLeft:after{ transform-origin: 0% 50%; } 
 

Expand from center


Expand from right


Expand from left

Sé que esta es una publicación anterior y ya está respondida, pero es posible que también desee el siguiente efecto.

 
.cd-single-point { position: absolute; list-style-type: none; left: 20px; top: 20px; } .cd-single-point>a { position: relative; z-index: 2; display: block; width: 10px; height: 10px; border-radius: 50%; background: #0079ff; -webkit-transition: background-color 0.2s; -moz-transition: background-color 0.2s; -o-transition: background-color 0.2s; transition: background-color 0.2s; } .cd-single-point::after { content: ''; position: absolute; border-radius: 50%; width: 100%; height: 100%; top: 0; left: 0; animation: cd-pulse 2s infinite; } @keyframes cd-pulse { 0% {box-shadow:0 0 0 0 #0079ff} 100%{box-shadow:0 0 0 20px rgba(255,150,44,0)} }

MANIFESTACIÓN

podemos hacer usando un efecto de transición simple.

HTML

 

CSS IS AWESOME

CSS

 h1 { color: #666; position: relative; display: inline-block; } h1:after { position: absolute; left: 50%; content: ''; height: 40px; height: 5px; background: #f00; transition: all 0.5s linear; width: 0; bottom: 0; } h1:hover:after { width: 270px; margin-left: -135px; } 

Enlace a Fiddle

 transition: all 1000ms ease-in-out; 

Manifestación

o estas buscando esto

Demo2

 h1 { color: #666; display:inline-block; margin:0; text-transform:uppercase; } h1:after { display:block; content: ''; border-bottom: solid 3px #92a8d1; transform: scaleX(0); transition: transform 800ms ease-in-out; } h1:hover:after { transform: scaleX(1); } 
 

Hover Over Me


 h1 { color: #666; } h1:after { position: absolute; left: 10px; content: ''; height: 40px; width: 275px; border-bottom: solid 3px #019fb6; transition: opacity 450ms ease-in-out; opacity: 0; } h1:hover:after { opacity: 1; } 
 

CSS IS AWESOME

versión simple y ligera

 li { margin-bottom: 10px; } .cool-link { display: inline-block; color: #000; text-decoration: none; } .cool-link::after { content: ''; display: block; width: 0; height: 2px; background: #000; transition: width .3s; } .cool-link:hover::after { width: 100%; //transition: width .3s; }