CS3의 콘텐츠 속성 설명

CSS의 주요 위조 요소는 네 가지가 있는데 그것이 바로 before/after/first-letter/first-line이다. before/after 위조 요소 선택기에 콘텐츠 속성이 있어 페이지의 내용을 삽입할 수 있다.
일반 문자 삽입
콘텐츠: 삽입된 글

<h1>  h1</h1>
<h2>  h2</h2>

css

h1::after{ content:"h1     " }
h2::after{ content:none }

실행 결과:https://jsfiddle.net/dwqs/Lmm1r08x/
문자 기호 포함
콘텐츠 속성의 Open-quote 속성 값과close-quote 속성 값을 사용하여 문자열 양쪽에 괄호, 단인덱스, 쌍인덱스 같은 삽입 문자 기호를 추가할 수 있습니다.open-quote는 시작하는 문자 기호를 추가하는 데 사용되고,close-quote는 끝 문자 기호를 추가하는 데 사용됩니다.위의 css: 수정

h1{ quotes:"(" ")"; /*     quotes        */ }
h1::before{ content:open-quote; }
h1::after{ content:close-quote; }
h2{ quotes:"\"" "\""; /*        */ }
h2::before{ content:open-quote; }
h2::after{ content:close-quote; }

실행 결과:https://jsfiddle.net/dwqs/p8e3qvv4/
그림 삽입
콘텐츠 속성도 요소 앞/뒤에 그림 html:

<h3>  h3</h3>

css:

h3::after{ content:url(http://ido321.qiniudn.com/wp-content/themes/yusi1.0/img/new.gif) }

실행 결과:https://jsfiddle.net/dwqs/c6qk6pkv/
요소의 속성 값 삽입하기
콘텐츠 속성은attr를 이용하여 원소의 속성을 직접 가져와 대응하는 위치에 삽입할 수 있습니다.html:

<a href="http:///www.ido321.com">    &nbsp;&nbsp;</a>

css:

a:after{ content:attr(href); }

실행 결과:https://jsfiddle.net/dwqs/m220nzan/
항목 번호 삽입
콘텐츠의counter 속성을 이용하여 여러 항목에 연속 번호를 추가합니다.html:

<h1>   </h1>
<p>  </p>
<h1>   </h1>
<p>  </p>
<h1>   </h1>
<p>  </p>
<h1>   </h1>
<p>  </p>

css:

h1:before{ content:counter(my)'.'; }
h1{ counter-increment:my; }

실행 결과:https://jsfiddle.net/dwqs/2ueLg3uj/
항목 번호 손질
기본적으로 삽입된 항목 번호는 숫자형입니다. 하나, 둘, 셋...자동으로 증가하여 프로젝트 번호에 문자와 스타일을 추가할 수 있습니다. 여전히 위의 html을 이용하여 css는 다음과 같이 수정합니다.

h1:before{ content:' 'counter(my)' '; color:red; font-size:42px; }
h1{ counter-increment:my; }

실행 결과:https://jsfiddle.net/dwqs/17hqznca/
번호 종류 지정
콘텐츠(계수기 이름, 번호 종류) 형식의 문법으로 번호 종류를 지정하고 번호 종류의 참고는 l의list-style-type 속성 값에 근거할 수 있습니다.위의 html을 사용하여 css 수정 사항은 다음과 같습니다.

h1:before{ content:counter(my,upper-alpha); color:red; font-size:42px; }
h1{ counter-increment:my; }

실행 결과:https://jsfiddle.net/dwqs/4nsrtxup/
번호 중첩
큰 번호에는 내포된 내포된 내포된 내포된 내포된 내포된 내포된 내포된 내포된 내포된 내포된 내포된 내포된 내포된 내포된 내포된 내포된 내포된 내포된 내포된 내포html:

<h1>   </h1>
<p>  1</p>
<p>  2</p>
<p>  3</p>
<h1>   </h1>
<p>  1</p>
<p>  2</p>
<p>  3</p>
<h1>   </h1>
<p>  1</p>
<p>  2</p>
<p>  3</p>

css:

h1::before{ content:counter(h)'.'; }
h1{ counter-increment:h; }
p::before{ content:counter(p)'.'; margin-left:40px; }
p{ counter-increment:p; }

실행 결과:https://jsfiddle.net/dwqs/2k5qbz51/예시된 출력에서 p의 번호가 연속적이라는 것을 알 수 있다.만약에 모든 h1 이후의 세 개의 p에 대해 다시 번호를 매긴다면counter-reset 속성을 리셋하여 상기 h1의 css:를 수정할 수 있습니다

h1{ counter-increment:h; counter-reset:p; }

이렇게 하면 번호가 리셋됩니다. 결과를 보십시오.https://jsfiddle.net/dwqs/hfutu4Lq/또한 3층 중첩과 같은 복잡한 중첩을 실현할 수 있다.html:

<h1>   </h1>
<h2>   </h2>
<h3>   </h3>
<h3>   </h3>
<h2>   </h2>
<h3>   </h3>
<h3>   </h3>
<h1>   </h1>
<h2>   </h2>
<h3>   </h3>
<h3>   </h3>
<h2>   </h2>
<h3>   </h3>
<h3>   </h3>

css:

h1::before{ content:counter(h1)'.'; }
h1{ counter-increment:h1; counter-reset:h2; }
h2::before{ content:counter(h1) '-' counter(h2); }
h2{ counter-increment:h2; counter-reset:h3; margin-left:40px; }
h3::before{ content:counter(h1) '-' counter(h2) '-' counter(h3); }
h3{ counter-increment:h3; margin-left:80px; }

실행 결과:https://jsfiddle.net/dwqs/wuuckquy/
장대대에는counter를 이용하여 계수를 실현하는 글이 있다. 소tip:CSS계수기+위조류는 수치의 동적 계산과 표현을 실현한다.
텍스트:http://www.ido321.com/1555.html