개요
:hover, :active 외에도 다양한 추상 클래스 / 가상 선택자가 존재하는데 그 중 :after 라는 가상 선택자가 존재한다.
이는 컨테이너 요소 안 맨 마지막에 추가시킬 태그를 지정할 수 있다.
Internet Explorer 7 이하 버전은 after 가상 선택자를 지원 하지 않는다.사용법
#container:after{ content:"추가된 텍스트"; display:block }
예제
<html> <head> <style> #container:after{ content:"더 텍스트가 추가되었습니다."; display:block } </style> </head> <body> <div id="container">기존 텍스트에</div> </body> </html>
출력 결과:
기존 텍스트에
더 텍스트가 추가되었습니다