content
CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!
content
등록중 입니다.
예제 1
content 개요 :before 예제
보기
맑음
흐림
맑다는데 아닐듯함
비온다면서 안옴
소스
<style type="text/css">
.css_test:before {
content
: '날씨 : ';
color
: blue;
}
</style>
<div class="css_test">맑음</div>
<div class="css_test">흐림</div>
<div class="css_test">맑다는데 아닐듯함</div>
<div class="css_test">비온다면서 안옴</div>
사용된 CSS (클릭시 보기) :
color
content
예제 2
보기
타잔이 10원짜리 팬티를 입고 20원짜리 칼을 차고 노래를 한다~
타잔이 20원짜리 팬티를 입고 30원짜리 칼을 차고 노래를 한다~
타잔이 30원짜리 팬티를 입고 40원짜리 칼을 차고 노래를 한다~
소스
<style type="text/css">
.css_test:after {
content
: ' 아아아~';
font-weight
: bold;
}
</style>
<div class="css_test">타잔이 10원짜리 팬티를 입고 20원짜리 칼을 차고 노래를 한다~</div>
<div class="css_test">타잔이 20원짜리 팬티를 입고 30원짜리 칼을 차고 노래를 한다~</div>
<div class="css_test">타잔이 30원짜리 팬티를 입고 40원짜리 칼을 차고 노래를 한다~</div>
사용된 CSS (클릭시 보기) :
content
font-weight
예제 3
보기
꼬마자동차 붕붕
꼬마자동차 붕붕붕
꼬마자동차 붕붕붕붕
소스
<style type="text/css">
.css_test:before {
content
: url('http://superkts.com/img/css/icon0135.gif') ' ';
}
</style>
<div class="css_test">꼬마자동차 붕붕</div>
<div class="css_test">꼬마자동차 붕붕붕</div>
<div class="css_test">꼬마자동차 붕붕붕붕</div>
사용된 CSS (클릭시 보기) :
content
예제 4
open-quote 와 close-quote 로 앞뒤 인용부호 만들기
보기
CSS 공작소
많은 방문 부탁드려요
뀨~
소스
<style type="text/css">
.css_test p:before {
content
: open-quote;
}
.css_test p:after {
content
: close-quote;
}
</style>
<div class="css_test">
<p>CSS 공작소</p>
<p>많은 방문 부탁드려요</p>
<p>뀨~</p>
</div>
사용된 CSS (클릭시 보기) :
content
☞ 목록으로 가기