before 가상클래스 #1 호버이펙트

 

- html

    <div class="gnb">
        <a href="#none">before hover effect example</a>
    </div>

 

 

포지션으로 위치를 잡을거라서 before, after이던 상관이 없음 
before after :

content=''; 필수로 있어야함, 인라인요소 (크기값을 가질 수 없음)

position: absolute - 인라인블럭 (크기값 가짐)

 

- css

a {
    text-decoration: none;
    color: #000;
}
div {
    margin: 10px 0;
}
/* 공통 */
.gnb a {
    position: relative;
    padding-bottom: 5px;
}
.gnb a:before {
    content: '';
    position: absolute;
    bottom: 0;
    background-color: crimson;
    transition: 0.3s;
}

/* underline 왼쪽 -> 오른쪽 */
.gnb a:before {
    width: 0;
    height: 1px;
}
.gnb a:hover:before {
/* a에 호버될때 자기자신의 before */
    width: 100%;
}

/* underline 오 -> 왼 */
.gnb2 a:before {  
    width: 0;
    height: 1px;
    right: 0;
}
.gnb2 a:hover:before {
    width: 100%;
}

/* 도트 왼 -> 오 */
.gnb3 a:before { 
    width: 4px;
    height: 4px;
    left: 0;
}
.gnb3 a:hover:before {
    /* left: 100%; 또는 calc로 계산해주기 */
    /* left:100%는 부모요소의 끝 점 */
    left: calc(100% - 4px);
}

/* 중앙 -> 바깥쪽 */
.gnb4 a:before {  
    width: 0px;
    height: 1px;
    left: 50%;
    transform: translateX(-50%);
}
.gnb4 a:hover:before {
    width: 100%;
}
/* 바깥쪽 -> 중앙 */
.gnb5 a:before { 
    width: 100%;
    height: 1px;
    left: 50%;
    transform: translateX(-50%);
}
.gnb5 a:hover:before {
    width: 0;
}