CSSにおける擬似クラス:afterの使い方

CSSには擬似クラスと呼ばれる特殊な属性が存在し、その中で最もよく使われるのはリンクを定義する擬似:link,:visited,:hover,:activeなどである.それらのほかに、focus、:first-child、:langなど、よく使われていない偽クラスもあります.CSSには偽クラスだけでなく、偽要素もあります.例えば、first-letter、:first-line、:beforeと:afterです.    ?本明細書の他の擬似要素は、after擬似要素のみを表す.afterはその名の通り要素の後ろにあるという意味で、実質的には要素の後ろに内容を追加します.この擬似要素は、作成者が要素コンテンツの一番後ろに生成コンテンツを挿入することを可能にし、contentプロパティとともに使用し、オブジェクトの後ろで発生するコンテンツを設定する必要があります.デフォルトでは、この擬似要素はinline行内の要素ですが、属性displayを使用して変更できます.すべての主流ブラウザでは、after擬似要素がサポートされていますが、IEではIE 8以上のバージョンでしかサポートされていません.次に例を挙げてCSSコードに挿入します.

<style type="text/css"> 

  h1:after {content:url(logo.gif)}  

</style> 
<h1>    </h1>

表示されると、タイトルの内容の後に画像が挿入されます.これが偽元素:afterの役割です.
:after擬似クラスのcontentは他のパラメータとも使用できます.
1:文字列の例:

1 <style type="text/css">

2 .test:after{content:"    "};

3 </style>

4 <div class="test">  div：</div>

実行結果:divのテスト:テストコード
二:attr(x)、attrは属性の意味であり、その名の通り、クラスノードの属性を読み取ることである.

1 <style type="text/css">

2 .test:after{content:attr(id)};

3 </style>

4 <div class="test" id="aaa">  div id ：</div>

実行結果:divをテストするidはaaa
三:固定パラメータ
close-quote:quotes属性のポストタグを挿入
No-close-quote:quotesプロパティのポストタグは挿入されません.ネストレベルを増やす
Open-quote:quotesプロパティのフロントタグを挿入
No-open-quote:quotesプロパティのフロントタグは挿入されません.ネストレベルを減らす