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 をよろしくお願いいたします。 |
<<: Linux でのマルチスレッドにおけるフォークの紹介
>>: スタイルをより標準化するための CSS の書き方に関する 5 つのヒント
目次MySQLを初期化するMySQL サービスをインストール + MySQL サービスを開始MySQ...
シナリオ会社のプロジェクトはDockerでデプロイされています。原因不明ですが、コンテナが時々停止し...
1. モバイル端末でクリックされたときにタグの青色を解除する { -webkit-tap-highl...
目次1. 需要背景2. 最適化計画3. 具体的な実施3.1 フロントエンドコード3.2 背景コード4...
privot は、多対多の関係の中間テーブルです。 PT5 フレームワークは自動的に privot ...
オブジェクトの hasOwnProperty() メソッドは、オブジェクトに特定の独自の (継承され...
前回のエピソードレビュー:昨日は、ページがさまざまなデバイス サイズにどのように対応するかについて説...
目次方法 1: ルーティング メタ情報 (meta)方法 2: ルーティング テーブルを動的に生成す...
目次1. 時間が経つにつれて限界が遅くなる理由2. 百万データシミュレーション1. 従業員テーブルと...
質問今日、プロジェクト関数を書いていたとき、金額の統計計算を行い、単位を変換する必要がありました。そ...
明らかな HTML、隠された「公開スクリプト」 Web ページのダウンロード時間を短縮する鍵は、フ...
何?何のスターコートですか?さて、もっとわかりやすくするために写真を見てみましょう。 よく見ると、パ...
最近、プロジェクトで問題が発生しました。サーバー側のプログラムが突然クラッシュして終了しました。クラ...
目次1: カプセル化の考え方2. 包装工程3: ドットインジケーター4: 左と右のインジケーター5:...
背景グラデーションと自動フルスクリーンに関する CSS の問題編集長は CSS の開発中に致命的な問...