Effetto Hover: espandere il bordo inferiore

Sto cercando di ottenere un effetto di transizione al passaggio del mouse sul bordo che il bordo si espande al passaggio del 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

Ho provato questo su Jsfiddle

Per espandere il bordo inferiore al passaggio del mouse , puoi usare transform:scaleX'(); ( riferimento MDN ) e la transizione da 0 a 1 sullo stato di hover.

Ecco un esempio di come può apparire l’effetto del puntatore del bordo: Espandi l'effetto hover del bordo

Il bordo e la transizione sono impostati su uno pseudo elemento per impedire la transizione del testo ed evitare l’aggiunta di markup.
Per espandere il bordo inferiore da sinistra o destra, puoi modificare la proprietà di trasformazione-origine a sinistra oa destra dello 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

So che questo è un vecchio post ed è già stato risposto ma potrebbe piacerti anche il seguente effetto.

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

DEMO

possiamo fare usando il semplice effetto di transizione.

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

Link a Fiddle

 transition: all 1000ms ease-in-out; 

dimostrazione

o stai cercando questo

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

versione semplice e leggera

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