[CSS] 밑줄효과

예시

마우스오버를 하면, 서서히 밑줄이 생긴다

구성요소

footer영역으로,

h3에는 레이아웃 영역이란 제목이, li목록에는 레이아웃 유형01, 02, 03 등등이 있다.

li목록에는 a태그를 주어서, 클릭할 수 있게 만들었다.

방법

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;
}