CSS :after 가상 요소로 요소 뒤에 콘텐츠 삽입하기

:after 가상 요소(pseudo-element)는 선택한 요소의 뒤쪽에 새로운 콘텐츠를 삽입할 때 사용하는 CSS 기능입니다. HTML을 직접 수정하지 않고도 꾸미기용 아이콘, 구분선, 텍스트 등을 추가할 수 있어 마크업을 깔끔하게 유지하는 데 매우 유용합니다.

기본 문법

:after 가상 요소는 반드시 content 속성과 함께 사용해야 하며, 이 속성에 지정한 값이 해당 요소 뒤에 표시됩니다.

selector:after {
  content: "삽입할 내용";
}

예제

다음 예제는 p:after 선택자를 사용하여 모든 <p> 태그 뒤에 불릿(bullet) 이미지를 추가하는 방법을 보여줍니다.

<html>
   <head>
      <style>
         p:after
         {
            content: url(/images/bullet.gif)
         }
      </style>
   </head>
   <body>
      <p>이 문장 뒤에는 불릿 이미지가 나타납니다.</p>
      <p>이 문장 뒤에는 불릿 이미지가 나타납니다.</p>
      <p>이 문장 뒤에는 불릿 이미지가 나타납니다.</p>
   </body>
</html>

실행 결과

위 코드를 실행하면 각 단락(<p>)의 텍스트 바로 뒤에 bullet.gif 이미지가 자동으로 붙어서 출력됩니다. 세 개의 단락 모두 동일한 스타일 규칙이 적용되므로, 일일이 HTML에 <img> 태그를 넣지 않아도 됩니다.

참고 사항

최신 CSS3 표준에서는 콜론 두 개(::after)를 사용하는 것이 권장되지만, 하위 브라우저 호환성을 위해 한 개의 콜론(:after)도 여전히 지원됩니다.
content 속성에는 문자열, URL, 카운터, 따옴표 등 다양한 값을 지정할 수 있습니다.
:after로 삽입된 콘텐츠는 실제 DOM에는 포함되지 않으므로, 검색 엔진이나 스크린 리더가 인식하지 못할 수 있습니다. 중요한 정보는 반드시 HTML에 직접 작성하세요.