[CSS] :before , :after 가상요소 > 온라인강의

본문 바로가기
 
 
 
오늘 1,800
어제 2,038
최대 2,454
전체 3,145,398
비즈니스의 시작 비즈명함 ~ 가격, 품질, 배송 3가지 만족을 드리는 비즈명함 / 즉석명함 / 급행서비스 / 서울 전지역 수도권일부 3시간배송

온라인강좌 홈 > 온라인강좌 > 온라인강좌

HTML | [CSS] :before , :after 가상요소

페이지 정보

작성일2016-09-03 18:38 조회1,248회 댓글0건

본문

두 선택자는 요소에 내용을 생성하는 역할을 합니다.
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-선택자-활용하기
  • 페이스북으로 보내기
  • 트위터로 보내기
  • 구글플러스로 보내기

댓글목록

등록된 댓글이 없습니다.


목록

Total 155건 1 페이지
온라인강의 목록
번호 제목
155
154
153
152
HTML HTML Anchors with 'name' or 'id'? (update.2016-12-27)  Hit.923
151
150
HTML [CSS] div 고정폭 + 가변폭 (update.2016-09-20)인기글  Hit.1249
열람중
HTML [CSS] :before , :after 가상요소 (write.2016-09-03)인기글  Hit.1249
148
147
146
HTML [CSS] div 이미지 공백 없애기 (write.2016-08-09)인기글  Hit.1399
145
HTML [CSS] li height 높이 변경 (write.2016-08-09)인기글  Hit.1401
144
143
HTML [CSS] DIV에 UL 가운데 정렬 (write.2016-08-06)인기글  Hit.1344
142
141
140
139
HTML IE 렌더링 모드 (write.2016-02-03)인기글  Hit.1391
138
137
136
135
134
133
132
131
HTML onMouseOver 샘플 (write.2015-07-16)인기글  Hit.2261
게시물 검색
 
 
상호: 해피정닷컴 대표:정창용 사업자등록번호:119-05-36414 (08394) 서울시 구로구 디지털로 242 한화비즈메트로1차 1502호
전화: 070-7600-3500 팩스:02-865-3528 개인정보관리:정창용 mail@happyjung.com 에스크로확인
개인정보취급방침
COPYRIGHT 2001~2017 해피정닷컴. All rights reserved. 부가통신사업신고:서울체신청-1217 통신판매신고:2014-서울구로-0074
 
모바일 버전으로 보기