CSS3 における擬似クラスの一般的な使用法の詳細な説明

before/after 疑似クラスは、要素内に 2 つの追加タグを挿入するのと同じです。最も適した推奨される用途は、グラフィック生成です。一部の高度な UI 実装では、HTML コードを簡素化して読みやすさと保守性を向上させることができます。これら 2 つの擬似クラス アプリケーションは海外では非常に人気があり、繁栄していますが、私たちのフロントエンド開発者は一般的にこれら 2 つの擬似クラスを使用するという意識が欠けているようです。使用したい場合、せいぜい「明確なフローティング」アプリケーションのトレンドに従うだけです。

1. 基本的な使い方

:before と :after の機能は、指定された要素コンテンツ (要素自体ではありません) の前または後に、content 属性で指定されたコンテンツを含むインライン要素を挿入することです。最も基本的な使用法は次のとおりです。

#例:before {
    コンテンツ： "＃";
    色: 赤;
}
 
#例:後{
    内容: "$";
    色: 赤;
}

どちらの疑似クラスもインライン要素に属しますが、display:block 属性を使用してブロック要素に変換できます。より一般的な使用法は、いくつかのスタイルを実装し、フローティング効果をクリアすることです。 。

2. スタイルの変更

コードは次のとおりです。

<div class="quote">
    <span>小さなアパート</span>
</div>
.quote:before、.quote:after{//これらの 2 つの疑似クラスを使用して、スタイル レンダリング コンテンツを実装します:"";
     表示:インラインブロック;
     幅:5%;
     マージン:5px 1%;
     border-bottom:1px 青一色;
}

効果は次の図に示されています。

3. クリアフロート

コードは次のようになります。

<div class="parent">
    <div class="box1"></div>
    <div class="box2"></div>
</div>
<div class="parent2">親2</div>
//cssコード.box1{
     幅:300ピクセル;
     高さ:200px;
     背景色: ライトグレー;
     フロート:左;
}
.box2{
     幅:300ピクセル;
     高さ:100px;
     背景色: 水色;
     フロート:左;
}
.親2{
     幅:400ピクセル;
     高さ: 400px;
     背景色:青;
     色:#fff;
     テキスト配置:中央;
     行の高さ:400px;
     フォントサイズ:30px;
}

浮動問題のため、実装効果は次のようになります。

上記のコードにこのコードを追加してフロートをクリアすると、異なる効果が得られます。

.parent:after{
     コンテンツ："";
     display:block; //ブロック要素に設定 clear:both; //このプロパティを使用してフロートをクリアします}

達成された効果は以下の図に示されています。

CSS3 の before および after 疑似クラスの一般的な使用法に関するこの記事はこれで終わりです。CSS3 の before および after 疑似クラスに関するより詳しい情報については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。