웹1.0/CSS, CSS2
가상요소(before, after) 정의와 사용방법 - CSS2
커드만
2016. 3. 14. 14:20
가상요소인 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을 선언해야 함.)
예시 첨부파일
위와 같은 화면이 나오는 예시 파일을 첨부 합니다. ^^