CSS :before 가상 요소란?
:before 가상 요소(pseudo-element)를 사용하면 임의의 요소 앞에 원하는 콘텐츠를 삽입할 수 있습니다. 이 기능은 content 속성과 함께 사용되며, 불릿(bullet) 이미지, 아이콘, 텍스트 등을 요소 앞에 자동으로 추가할 때 매우 유용합니다.
예제
다음 코드를 실행해 보면 CSS만으로 요소 앞에 콘텐츠를 삽입하는 방법을 직접 확인할 수 있습니다.
<html>
<head>
<style>
p:before {
content: url(/images/bullet.gif)
}
</style>
</head>
<body>
<p>이 줄 앞에는 불릿이 표시됩니다.</p>
<p>이 줄 앞에는 불릿이 표시됩니다.</p>
<p>이 줄 앞에는 불릿이 표시됩니다.</p>
</body>
</html>
실행 결과: 위 코드에서는 p:before 선택자가 모든 <p> 태그에 적용되어, 각 문단 앞에 bullet.gif 이미지가 자동으로 나타납니다. HTML 구조를 변경하지 않고도 스타일시트만으로 장식 요소를 추가할 수 있어 코드 관리가 훨씬 깔끔해집니다.
참고 사항
CSS3부터는 가상 요소를 나타낼 때 콜론 두 개(::before)를 사용하는 것이 공식 표준입니다. 다만 구형 브라우저와의 호환성을 위해 단일 콜론 형태인 :before도 여전히 널리 지원되고 있습니다. 또한 content 속성에는 URL뿐 아니라 문자열(예: "→ ")이나 카운터 값도 지정할 수 있으므로, 목록 꾸미기나 인용문 강조 등 다양한 용도로 활용할 수 있습니다.