[CSS] :before , :after 가상요소 > 기술자료

• 목록

두 선택자는 요소에 내용을 생성하는 역할을 합니다.
html 문서에 쓰지 않고도, css로 내용을 삽입할 수 있습니다.

:before
요소의 앞에 내용을 생성 함

:after
요소의 뒤에 내용을 생성 함

위의 두 가상 요소는 css2에 도입된 요소이며, css3에서는 ::before , ::after 라고 씁니다.

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

: 과 :: 브라우저 지원
:after
IE 8+, FF, Chrome, Opera+, Safari 4.0+

::after
IE 9+, FF 1.51(1.8)+, Chrome, Opera 7+, Safari 4.0+


:before 과 :after 사용법
요소 :before{속성:속성값;}
요소 :after{속성:속성값;}

사용예
P:before{content;"주의!"; color:red; font-weight:bold; }

*content 속성 브라우저 지원 정보*
IE 8+, Chrome 1.0+, FF 1.0+, Safari 1.0+, Opera 4.0+

<style>
#after-preview2 a:after{content:" | ";color:#ccc}
#after-preview2 a:last-child:after{content:"";}

#header .header:after {content:" ";display:block;position:absolute;left:-99.9%;top:63px;width:100%;height:70px;background-color:#ee3212;z-index:0;}
#header .header:before {content:" ";display:block;position:absolute;right:-99%;top:63px;width:100%;height:29px;background-color:#ee3212;z-index:0;}
</style>

<div id="after-preview2">
<a href="#">1111</a>
<a href="#">222</a>
<a href="#">333</a>
</div>

결과
1111 | 2222 | 3333


참고자료
http://aboooks.tistory.com/252
http://blog.wincomi.com/entry/CSS-before-after-구분선-예제#
http://killic.tistory.com/entry/CSS-before-after-선택자-활용하기