before after 가상클래스 #3 호버이펙트 - rotate

 

 

a:before a:after 만들고 

호버 시에 비포 에프터에 각각 rotate(45deg) rotate(-45deg)  

글씨는 letter-spacing 크게 

<div class="rotate-navi">
    <a href="#none">CodingWorks Online Class</a>
</div>

.rotate-navi {
    margin: 50% 0; 없어도 됨 
}    
.rotate-navi a {
    position: relative;
    display: block;
    padding: 15px;
    width: 450px;
    box-sizing: border-box;
    /* 보더박스를 안하면 패딩을 넣었을 때 a의 크기가 커진다. */
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    /* border: 1px solid red; */
    transition: 0.3s;
}
.rotate-navi a:before,
.rotate-navi a:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid #7e7e7e;
    transition: 0.3s;
}
.rotate-navi a:hover {
    letter-spacing: 5px;
}
.rotate-navi a:hover:before {
    transform: rotate(45deg);
    background-color: transparent;
}
.rotate-navi a:hover:after {
    transform: rotate(-45deg);
    background-color: transparent;
}