after 가상 선택자

개요

: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>
출력 결과:
기존 텍스트에