티스토리 뷰
방법
li > a에 포지션 relative를 주고, transition을 0.3으로 자연스럽게 한다.
마우스 오버와 마우스 오버하지 않을 때의 차이를 주기 위하여 미세하게 컬러를 바꿔주었다
.footer_menu >div li a {
color: rgb(57,57,57);
transition: all 0.3s;
}
.footer_menu >div li a:hover {
color: #000;
}
가상요소를 주기 위하여 li > a 에 position:relative를 주고, 가상요소에는 position: absolute를 한다.
그리고 transform: sacleX(0)을 0으로 한다
.footer_menu >div li a {
position: relative;
}
.footer_menu >div li a::before {
content: '';
position: absolute;
left: 0;
bottom: -3px;
width: 100%;
height: 1px;
background: #000;
transform: scaleX(0);
transition: all 0.3s ease;
}
마우스를 오버했을 때, 크기를 커지게 한다
그래서 transform: scaleX(1)로 한다
.footer_menu >div li a:hover::before{
transform: scaleX(1);
color: #000;
}
자연스럽게 커지게 하도록 여기에서도 transition: all 0.3s ease;를 해준다
.footer_menu >div li a::before {
transition: all 0.3s ease;
}
전체코드
.footer_menu >div li a {
position: relative;
color: rgb(57,57,57);
transition: all 0.3s;
}
.footer_menu >div li a:hover {
color: #000;
}
.footer_menu >div li a::before {
content: '';
position: absolute;
left: 0;
bottom: -3px;
width: 100%;
height: 1px;
background: #000;
transform: scaleX(0);
transition: all 0.3s ease;
}
.footer_menu >div li a:hover::before{
transform: scaleX(1);
color: #000;
}
댓글
© 2018 webstoryboy