CSS: Bottom-Border-Übergang - von Mitte erweitern

Question

Ich möchte ein paar Übergänge zu meiner Website hinzufügen. Ich habe bereits, dass, wenn jemand in einem Eingabefeld ist (also: Fokus) der Rahmen die Farbe mit einem Übergang ändert. Ich möchte, dass dieser Übergang von der Mitte nach links und rechts stattfindet.

Die Animation ist also eine expandierende Grenze zu beiden Seiten. Ist das mit CSS möglich? Wenn ich Jquery oder Javascript verwenden muss, ist es in Ordnung.

Vielen Dank im Voraus, Ian

Answer 1

Sie können mit CSS die Grenze Übergang zu tun. Hoffe, das hilft. 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; 
}