疑似要素::before および ::after の使用方法の詳細な説明-CSSチュートリアル-php.cn

疑似要素::before および ::after の使用方法の詳細な説明

php中世界最好的语言

リリース： 2018-03-21 10:40:26

オリジナル

4480 人が閲覧しました

今回は、疑似要素::before と ::after の使用について詳しく説明します。疑似要素 ::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 疑似要素を使用して、古典的な

クリアフロート問題 :.clearfix::after{ display:block; clear:both; content:""; overflow:hidden; }

もちろん、ウェブサイトとの互換性が必要な場合は、 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;}

ログイン後にコピー

rree

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

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

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

ログイン後にコピー

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

ログイン後にコピー

効果は次のとおりです:

この cjk-ideographic に加えて、CSS でさらに

list-style-type

属性を使用することもできます: (表を w3cshool に直接貼り付けます)

信じられないかもしれませんが、この記事の事例を読んだ後は、その方法をマスターしたことになります。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

CSS3 は縞模様の背景を作成します

マウスが画像内に移動したときの CSS3 動的プロンプト効果

CSS でステッカーフッターレイアウトを使用する方法

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