CSS 가상 요소(Pseudo-element)는 실제 HTML 태그를 추가하지 않으면서 요소의 특정 부분만 선택해 스타일을 적용할 수 있게 해주는 강력한 선택자입니다. 예를 들어 텍스트의 첫 글자(first-letter), 첫 줄(first-line)처럼 문서 구조에는 존재하지 않는 부분도 꾸밀 수 있습니다.
특히 ::before와 ::after 가상 요소를 활용하면 각각 요소의 앞과 뒤에 새로운 콘텐츠를 삽입할 수 있어, 번호 매기기나 장식용 요소 추가 등 다양한 작업을 CSS만으로 처리할 수 있습니다.
기본 문법
CSS에서 가상 요소를 사용하는 기본 문법은 다음과 같습니다. 참고로 최신 표준에서는 콜론 두 개(::)를 사용하는 것이 권장됩니다.
Selector::pseudo-element {
css-property: /*value*/;
}예제 1: ::before와 ::after로 자동 번호 만들기
다음은 카운터(counter)와 함께 ::before, ::after 가상 요소를 활용해 목록 항목 앞뒤에 자동으로 번호를 붙이는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
ol, ul {
list-style: none;
counter-reset: demo_var2;
}
ul {
counter-reset: demo_var1;
}
ol > li::before {
counter-increment: demo_var2;
content: counter(demo_var2, lower-roman) ") ";
}
li::after {
counter-increment: demo_var1;
content: " " counter(demo_var1) ". ";
}
</style>
</head>
<body>
<ul>
<li>Demo Line</li>
<ol>
<li>demo line</li>
<li>demo line</li>
</ol>
<li>Demo Line</li>
<ol>
<li>demo line</li>
<li>demo line</li>
</ol>
<li>Demo Line</li>
</ul>
</body>
</html>실행 결과
위 코드를 실행하면 각 목록 항목 뒤에는 숫자 번호가, 중첩된 순서 목록(ol) 항목 앞에는 로마자 소문자(i, ii) 번호가 자동으로 표시됩니다.
예제 2: ::placeholder로 입력 필드 플레이스홀더 스타일링
다음 예제는 입력 필드의 플레이스홀더(placeholder) 텍스트에 색상과 이탤릭 스타일을 적용합니다. 브라우저 호환성을 위해 웹킷 계열(Edge 포함), 인터넷 익스플로러, 표준 문법 세 가지를 모두 작성했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
::-webkit-input-placeholder { /* Edge 지원 */
color: blue;
font-style: italic;
}
:-ms-input-placeholder { /* Internet Explorer 지원 */
color: blue;
font-style: italic;
}
::placeholder {
color: blue;
font-style: italic;
}
</style>
</head>
<body>
<h2> Sample Form </h2>
<textarea id="desc" name="desc" rows="5" cols="33" placeholder="Type here"></textarea>
<br />
<input type="text" name="author" placeholder="author name">
</body>
</html>실행 결과
위 코드를 실행하면 텍스트 영역과 입력 필드의 플레이스홀더 텍스트가 파란색 이탤릭체로 표시되어, 사용자에게 입력 안내를 시각적으로 돋보이게 전달할 수 있습니다.