4. 가상 요소 선택자

가상 요소 선택자 : HTML 문서에 명시적으로 작성된 구성요소는 아니지만 존재하는 것처럼 취급해 선택하는 선택자

기준 선택자와 함께 사용, 기준 선택자 생략하면 전체 선택자가 들어간 것으로 적용

/* 형식 */
기준 선택자::가상 요소 선택자{/* CSS 코드 */}

 

총 12개 있는데 실무에서는 2개만 주로 쓰임

 

:: before : 콘텐츠 앞의 공간을 선택

::after : 콘텐츠 뒤의 공간을 선택

 

<!--예시-->
<style>
	p::before{
    	content:'<before>';
}
    p::after{
    	content:'<after>';
}
</style>

content 속성은 CSS 속성으로 새 콘텐츠 만들 때 사용, html에서는 ::before와 ::after 선택자에서만 사용함

content 속성으로 추가된 콘텐츠는 다른 CSS 속성과 함께 활용 가능

<!--예시-->
	p::before{
    	content:'<before>';
        color:blue;
}