CSS: bottom-border-transition - expand from middle

Question

Desidero aggiungere un po 'di transizioni al mio sito web. Ho già questo quando qualcuno si trova in un campo di input (quindi: focus) il bordo cambia colore con una transizione. Vorrei che la transizione avvenisse dal centro a sinistra e a destra.

Quindi l'animazione è un bordo in espansione su entrambi i lati. È possibile con i CSS? Se devo usare Jquery o Javascript va bene.

Grazie in anticipo, Ian

Answer 1

Si può fare il passaggio di confine con i CSS. Spero che questo aiuti. CODEPEN example

HTML:

<ul> 
    <li><a href="#">HOME</a></li> 
    <li><a href="#">PAGE</a></li> 
    <li><a href="#">ABOUT US</a></li> 
    <li><a href="#">CONTACT US</a></li> 
</ul> 

CSS:

body { 
    padding: 50px; 
} 

a, a:hover { 
    color: #000; 
    text-decoration: none; 
} 

li { 
    display: inline-block; 
    position: relative; 
    padding-bottom: 3px; 
    margin-right: 10px; 
} 
li:last-child { 
    margin-right: 0; 
} 

li:after { 
    content: ''; 
    display: block; 
    margin: auto; 
    height: 3px; 
    width: 0px; 
    background: transparent; 
    transition: width .5s ease, background-color .5s ease; 
} 
li:hover:after { 
    width: 100%; 
    background: blue; 
}