CSS : 아래쪽 테두리 전환 - 가운데에서 펼치기

Question

내 웹 사이트에 약간의 영상 효과를 추가하고 싶습니다. 나는 이미 누군가가 입력 필드에있을 때 (그래서 초점을 맞춘다.) 경계가 전환과 함께 변한다. 그 변화가 중심에서 좌우로 일어나기를 바란다.

그래서 애니메이션은 양쪽에 확장되는 경계입니다. CSS로 가능합니까? Jquery 나 Javascript를 사용해야한다면 괜찮습니다. 사전에

감사합니다, 이안

Answer 1

당신은 CSS와의 국경 전환을 할 수 있습니다. 희망이 도움이됩니다. 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; 
}