疑似要素::before および ::after の使用方法に関するチュートリアル

::before と ::after は、CSS3 に実際に含まれる 2 つの擬似要素ですが、CSS2 ではすでに存在しますが、CSS2 では前にコロン (:before と :after) で表されます。今回は主にこの2つの擬似要素の使い方についてお話します。

1. 通常の要素と同じようにスタイルを追加できます

例えば、テキストの前にアイコンを追加したい場合、通常の要素で次のように記述できます。いつも空の i タグを付けているような気がします。とても不快なので、削除してください。

/*CSS*/.del{ font-size: 20px;}.del i{ display: inline-block; width: 20px; height: 25px; margin-right: 2px; vertical-align: middle; background: url("imgs/delete.png") no-repeat center; background-size: 100%;}.del span{ vertical-align: middle;}

/*HTML*/
<div class="del"><i></i><span>删除</span></div>

ここでは、::before 擬似要素を直接使用して、空の i タグを置き換えます。この 2 つは同じ効果があります。

これと同じ点を使用して、::after 擬似要素を使用して解決できます。 float をクリアするという古典的な問題:

/*CSS*/.del{ font-size: 20px;}.del::before{ content: ""; display: inline-block; width: 20px; height: 25px; margin-right: 2px; vertical-align: middle; background: url("imgs/delete.png") no-repeat center; background-size: 100%;}.del span{ vertical-align: middle;}

もちろん、Web サイトが IE8 と互換性を持つ必要がある場合は、:after を使用してください。::after には互換性がありません。

2. 要素にテキストを挿入する

場合によっては、同じテキストを多くの要素に同時に追加する必要があるため、これら 2 つの疑似要素の使用を検討できます。例:

/*HTML*/
<div class="del"><span>删除</span></div>

.clearfix::after{ display:block; clear:both; content:""; overflow:hidden; height:0; }

効果は次のとおりです:

3. 要素に画像を挿入します

この記事の最初の例と同様の画像とテキストの効果を実現します。疑似要素を使用して画像を直接挿入することもできます。背景を使用せずに、次のような画像を作成します:

/*CSS*/.up:after{ content: '↑'; color: #f00;}.down:after{ content: '↓'; color: #0f0;}

ただし、この方法で挿入された画像は、疑似要素のサイズを制御して画像のサイズを変更することはできず、固定要素のみを導入できることに注意することが重要です。 -サイズの画像（これは少し難しいですが..）なので、個人的には正直で実用的な背景画像を使用する方が良いと思います。

4. 連続したプロジェクト番号を挿入する

もしかしたら、連続したプロジェクト番号を追加するのは簡単ではないかと思われるかもしれません。順序付きリストを直接使用するだけです。

はい、次のようにして確かに可能です:

/*HTML*/
<p class="up">上升</p>
<p class="down">下降</p>

これは Chrome での効果です:

良さそうです、問題ありません。前のシリアル番号を太字にしたい場合はどうすればよいですか?混乱しています...

さて、各テキストの前にラベルと番号を手動で追加してから、ラベルにスタイルを追加することはできないでしょうか?

/*CSS*/.del{ font-size: 20px;}.del::before{ content: url("imgs/delete.png"); display: inline-block; margin-right: 2px; vertical-align: middle; }.del span{ vertical-align: middle;}

rree

はい、今は 3 時です。30 時か 300 時だったらどうでしょうか。一つずつ追加していきますか？ (とても愚かで素朴です...)

現時点で純粋な CSS を使用する場合は、疑似要素を使用する必要があります:

<p>我的爱好：</p><ol><li>吃饭</li><li>睡觉</li><li>打豆豆</li></ol>

/*CSS*/ul li{ list-style: none;}ul li span{ font-weight: bold;}

その効果は次のとおりです:

その後、アラビア数字が必要ない場合, 使いたいのですが、中国語の数字は使えますか？

はい！擬似要素が素敵で強力です！

/*HTML*/<p>我的爱好：</p><ul><li><span>1.</span>吃饭</li><li><span>2.</span>睡觉</li><li><span>3.</span>打豆豆</li></ul>

その効果は次のとおりです:

これに加えて、CSS でさらに list-style-type 属性を使用することもできます: (w3cshool にテーブルを直接貼り付けます)

cjk-ideographic

以上が疑似要素::before および ::after の使用方法に関するチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。