CSS: przejście po dolnej granicy - rozwiń od środka

Question

Chcę dodać trochę przejść do mojej witryny. Mam już to, gdy ktoś jest w polu wejściowym (więc: focus), obramowanie zmienia kolor z przejściem. Chciałbym, aby to przejście miało miejsce od środka do lewej i prawej strony.

Tak więc animacja jest rozszerzającą się granicą dla obu stron. Czy to możliwe z CSS? Jeśli muszę używać Jquery lub JavaScript, to jest w porządku.

Dzięki z góry, Ian

Answer 1

Można zrobić przejścia granicznego z CSS. Mam nadzieję, że to pomoże. 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; 
}