하단 경계 호버 전환

Question

border-bottom 호버 효과를 아래에서 위로 수행하는 방법을 알려줄 수 있습니까?

의 Src : 여기

Answer 1

http://www.sony.com/electronics/playstation가 pseudo 요소 ::after

border-bottom 찬성이를 사용하는 이점을 사용하여 간단한 샘플입니다, 그것은 위아래로

을 요소를 이동하지 않습니다

a { 
 
    position: relative; 
 
    padding: 10px 20px; 
 
} 
 
a::after { 
 
    content: ' '; 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: -5px; 
 
    width: 100%; 
 
    height: 0; 
 
    background: blue; 
 
    transition: height 0.3s; 
 
} 
 
a:hover::after { 
 
    height: 5px; 
 
    transition: height 0.3s; 
 
}

<a> Hover me </a>