CSS: after, before (가상선택자)

css에서는 가상선택자로 컨텐츠의 앞이나 뒤에 내용을 추가할 수 있다.

 

가상영역의 기준이 꼭 있어야 하며,

left/right/top/bottom으로 위치를 지정할 수 있다.

 

.menu li {
	position: relrative; //기준
}

.menu li:after {
    content:""; //필수
    position: absolute;
    left: 0;
    top: 0;
}

 

after, before는 가상이기 때문에,

width와 height를 지정해주고 background색상을 줘야 눈으로 볼 수 있다.

 

.menu li:after {
    content:""; //필수
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 1px;
    background-color: #ddd;
}

 

 

마우스 오버시 스타일이 나오게 after를 활용하기 위해선

.menu li:after {
	...
	display: none;
}

.menu li:hover:after {
	display: block;
}

 

이렇게 이용할 수 있다.