CSS :before 가상 요소란?
:before 가상 요소는 선택한 요소의 실제 콘텐츠 앞에 새로운 콘텐츠를 삽입할 때 사용하는 CSS 선택자입니다. HTML 구조를 수정하지 않고도 글머리 기호, 아이콘, 장식용 텍스트 등을 추가할 수 있어 마크업을 깔끔하게 유지하는 데 매우 유용합니다.
이 가상 요소는 반드시 content 속성과 함께 사용해야 하며, 텍스트 문자열, 이미지 URL, 따옴표 등 다양한 값을 지정할 수 있습니다.
예제
다음 예제는 :before 가상 요소를 활용하여 모든 <p> 태그 앞에 불릿(bullet) 이미지를 추가하는 방법을 보여줍니다.
<html>
<head>
<style>
p:before
{
content: url(/images/bullet.gif)
}
</style>
</head>
<body>
<p> 이 줄 앞에는 불릿 기호가 표시됩니다.</p>
<p> 이 줄 앞에는 불릿 기호가 표시됩니다.</p>
<p> 이 줄 앞에는 불릿 기호가 표시됩니다.</p>
</body>
</html>
실행 결과
위 코드를 브라우저에서 실행하면 각 문단 텍스트 앞에 /images/bullet.gif 이미지가 자동으로 나타납니다. 세 개의 <p> 요소에 동일한 스타일이 적용되므로, 일관된 불릿 기호가 반복적으로 표시됩니다.
활용 시 참고 사항
:before로 생성된 콘텐츠는 기본적으로 인라인(inline) 요소이며, 필요에 따라display속성으로 형태를 변경할 수 있습니다.- 최신 브라우저와의 호환성을 위해서는 더블 콜론 표기법인
::before사용이 권장됩니다. content속성이 누락되면 가상 요소가 화면에 렌더링되지 않으므로 반드시 함께 작성해야 합니다.