CSS 3のcontent属性の詳細

CSSの主な擬似要素は4つあります:before/after/first-letter/first-line、before/after擬似要素セレクタの中で、1つのcontent属性があって、ページの中の内容の挿入を実現することができます.

テキストの挿入

content:「挿入された記事」、またはcontent:noneはコンテンツhtmlを挿入しません:

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

css

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

実行結果:https://jsfiddle.net/dwqs/Lmm1r08x/

埋め込み文字記号

contentプロパティの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/

画像を挿入

contentプロパティは、要素の前後に直接画像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/

要素の属性値の挿入

contentプロパティはattrを直接利用して要素のプロパティを取得し、対応する位置に挿入できます.html:

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

css:

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

実行結果:https://jsfiddle.net/dwqs/m220nzan/

項目番号の挿入

contentの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/

アイテム番号修飾

デフォルトで挿入される項目番号は数値型で、1,2,3...自動的に増加して、プロジェクト番号に文字とスタイルを追加することができて、依然として上のhtmlを利用して、cssは以下のように修正します:

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

実行結果:https://jsfiddle.net/dwqs/17hqznca/

指定番号の種類

content(カウンタ名、番号種類)フォーマットの構文で番号種類を指定し、番号種類の参照はulの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の番号が連続していることがわかる.各h 1の後の3つのpについて再番号を付ける場合はcounter-resetプロパティを使用してリセットし、上記のh 1の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