CSS3における疑似要素::beforeと::afterの使い方の詳細な説明

before と after は実際には要素の前後に付けられた疑似要素です。疑似要素とは、要素が DOM 内で生成されるのではなく、ブラウザーのレンダリング エンジンが CSS をレンダリングするときに描画されるということです。 CSS3 における疑似要素 ::before と ::after の使い方を紹介しますので、必要な方は参考にしてください。

前書き

2 つの疑似要素 ::before と ::after は実際には CSS3 の内容であることはよく知られていますが、実際には CSS2 にすでに存在していますが、CSS2 では前に追加されています。 (:before と :after) を示すコロン。今回は主にこの2つの擬似要素の使い方についてお話します。

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

例えば、テキストの前にアイコンを追加したい場合、通常の要素で書くと次のように書くことができます:

/*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*/
<p class="del"><i></i><span>删除</span></p>

でも、空の i タグを残すのはいつも不快なので、削除してください。

/*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;}

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

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

また、これを利用して、 ::after 問題を解決するための疑似要素Web サイトが IE8 と互換性を保つ必要がある場合は、:after を使用してください。::after は互換性がありません。

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

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

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

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

効果は次のとおりです:

3 番目に、要素

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

/*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;}

ただし、この方法で挿入された画像は、次のように画像のサイズを変更できないことに注意することが重要です。擬似要素のサイズを制御すると、固定サイズの画像しかインポートできないので（これは少し難しい...）、個人的には正直で実用的な背景画像を使用する方が良いと思います。

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

おそらく、連続したプロジェクト番号を追加するのは簡単ではないでしょうか?順序付きリストを直接使用するだけです。

はい、次のように可能です:

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

これは Chrome での効果です:

見た目は問題ありません。前のシリアル番号を太字にしたい場合は、ウールの布地を使用します。 ?混乱しています...

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

/*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>

そうだ、今が3時か300時だったらどうする？一つずつ追加していきますか？ (非常に愚かで素朴です...)

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

/*CSS*/
ul li{ list-style: none; counter-increment: number;}   //number相当于是个变量，随便取名就好，在伪元素中调用
ul li::before{ content: counter(number)"."; font-weight: bold;}  //注意这里不同于JS，counter(number)与"."之间不需要加任何东西，直接连接就好

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

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

Then ifアラビア数字ではなく、漢数字だけを使いたいのですが、大丈夫ですか？

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

ul li{ list-style: none; counter-increment: number;}  
ul li::before{ content: counter(number,cjk-ideographic)"、"; font-weight: bold;}

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

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

以上がCSS3における疑似要素::beforeと::afterの使い方の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。