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 (클릭시 보기) : colorcontent
예제 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 (클릭시 보기) : contentfont-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