가상요소(before, after) 정의와 사용방법 - CSS2

가상요소인 before 와 after 선택자 입니다.

:before는 선택자의 앞에 속성값을 설정할때 사용하고,

:after는 선택자의 위에 속성값을 설정할때 사용합니다.

위 선택자의 사용 방법은 아래와 같습니다.

css2에서 사용예시

div:before{}

div:after{}

css3에서 사용예시

div::before{}

div::after{}

:와 ::차이

::는 css3에서 가상클래스와 가상요소를 구분하기위해 도입 되었습니다.

:와 ::브라우저 지원여부

:before, :after는

ie8+, FF, chrome, opera+, safari4.0+

::before, ::after는

ie9+, FF1.5(1.8)+, chrome, opera7+, safari4.0+

사용방법

:before, :after는 주로 content 속성과 많이 사용 됩니다.

div:before{content:"안녕"; background:yellow; color:red;}

content속성 또한 모든브라우저를 지원하지 않습니다. 지원하는 브라우저는 아래와 같습니다.

ie8, chrome1.0+, FF1.0+, safari1.0+, opera4.0+ (ie8은 doctype을 선언해야 함.)

예시 첨부파일

위와 같은 화면이 나오는 예시 파일을 첨부 합니다. ^^

before & after test.htm