CSS의 :after 가상 요소(pseudo-element)를 사용하면 별도의 HTML 태그를 추가하지 않고도 특정 요소 뒤에 원하는 콘텐츠를 삽입할 수 있습니다. 이때 반드시 content 속성과 함께 사용해야 하며, 값으로 텍스트, 이미지 URL, 따옴표 등을 지정할 수 있습니다.
예제
아래 코드를 실행하면 각 문단(<p>) 뒤에 불릿 이미지가 자동으로 삽입되는 것을 확인할 수 있습니다.
<html>
<head>
<style>
p:after {
content: url(/images/bullet.gif);
}
</style>
</head>
<body>
<p>이 줄 뒤에는 불릿이 표시됩니다.</p>
<p>이 줄 뒤에는 불릿이 표시됩니다.</p>
<p>이 줄 뒤에는 불릿이 표시됩니다.</p>
</body>
</html>:after와 ::after의 차이
CSS3부터는 가상 요소를 나타낼 때 콜론 두 개(::after)를 사용하는 것이 표준입니다. 구형 브라우저(IE8 등)와의 호환성이 필요한 경우 단일 콜론(:after)도 여전히 동작하지만, 새 프로젝트에서는 ::after 표기를 사용하는 것이 좋습니다.
텍스트 콘텐츠 삽입하기
이미지 대신 텍스트를 삽입하고 싶다면 content 속성에 문자열을 지정하면 됩니다.
p::after {
content: " →";
color: #e74c3c;
}위 코드는 모든 문단 끝에 빨간색 화살표 문자를 추가합니다. 이처럼 :after 가상 요소를 활용하면 아이콘, 구분 기호, 안내 문구 등을 마크업 수정 없이 손쉽게 추가할 수 있어 유지보수에도 유리합니다.