스타일 시트 CSS 가상 선택자 after 사용하는 방법

스타일시트 CSS

스타일 시트 CSS 가상 선택자 after 사용하는 방법

 

가상 선택자 after 은 가상 클래스와 사용 방법이 같습니다. 태그나 클래스, 아이디 뒤에 콜론과 이름을 적으면 됩니다. after 의 기능은 좀 특이한데 태그로 감싼 내부 텍스트 끝에 지정한 텍스트를 붙여 넣습니다. 이런 after 기능은 익스플로러 7 이하에 지원되지 않습니다.

 

after 의 사용법은 간단합니다. 태그나 클래스 뒤에 콜론과 함께 after 선택자를 지정하고 내부에 속성은 content 를 사용합니다. content 에 입력한 텍스트는 컨테이너 요소 안 맨 마지막에 추가되는 것이죠. after 앞에 하나의 콜론을 쓰는 것은 CSS2 의 문법입니다. 익스플로러 8 이나 그 이전 버전에 적용되며 새로운 CSS3 에는 두 개의 콜론을 사용해야 합니다.

 

태그::after {

content : “추가될 텍스트”;

속성1 : 1;

속성2 : 2;

}

 

아래 예제처럼 p 태그와 #con 아이디 선택자에 after 를 적용했습니다. content 의 내용이 내부 텍스트 끝에 추가가 되겠죠. 그리고 같이 입력한 속성값들은 content 의 텍스트를 꾸미게 됩니다.

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>정렬</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	p::after { 
	    content: "-필수 입력사항 ";
	    background-color: yellow;
	    font-weight: bold;
	}
	#con::after{ 
		content:"텍스트를 추가한다.";
	}
</style>
</head>
<body>
	<p>이름 : </p>
	<p>아이디 : </p>
	<div id="con">내부 텍스트 마지막에 </div>
</body>
</html>

 

스타일 시트 CSS 가상 선택자 after 사용하는 방법

 

Posted by 녹두장군