Page 75 - MDP2020-2

················································································ 명장양성프로젝트 【MDP】 과제발표회 자료집 Ⅱ | 69

/* 버튼에 마우스가 올려졌을때 */
cursor: pointer;
/* 커서를 포인터로 변경 */
display: inline-block;
position: relative;
/* 위치 속성 realative */
transition: 0.5s;
/* 동작시간 0.5s */
}

.button span::after{
/* 버튼에 마우스가 올려졌을때 동작 */
content: '\00bb';
/* "»" 엔트리 설정 */
position: absolute;
/* 위치 속성 absolute */
opacity: 0;
/* 투명하게 */
top: 0;
/* 위에서 0px */
right: -20px;
/* 오른쪽에서 -20px */
transition: 0.5s;
/* 동작시간 0.5s */
}

.button:hover span{
/* 의사 결정 클래스 */
padding-right: 25px;
/* 우로 25px 이동 */
}

.button:hover span::after{
/* 의사 결정 클래스 동작 후 */
opacity: 1;
/* 불투명하게 */
right: 0;
/* 오른쪽에서 0px */
}