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 つのヒント
まず Linux に ssh をインストールします。例として Centos を使用します。ポータル:...
この記事では、centos6.6 で php7 + nginx 環境をインストールする方法について説...
Nestjs 例外フィルターといえば、非常に強力な .Net のグローバル フィルターについて触れな...
この記事では、例を使用して、MySQL イベントの変更 (ALTER EVENT)、イベントの無効化...
1. クエリを最適化するには、テーブル全体のスキャンを避けてください。まず、where と orde...
目次MVCCとはMVCC 実装MVCC はファントム リードを解決しますか? MVCCとはMVCC ...
目次序文1. 従来のVueコンポーネント1. メインコンポーネントコード: 2. 使用方法3. 成果...
方法1: SET PASSWORDコマンドを使用する mysql -u ルート mysql> ...
CSS の float プロパティを正しく使用することは、カバーすべき内容が多く、ブラウザの互換性の...
目次フレーム最高レベルのエラー報告活発なコミュニティとチーム冗談モカ推奨プラグインVue テストライ...
js興味深いカウントダウンケース、参考までに、具体的な内容は次のとおりですコード: <!DO...
スタートアップ企業は、型破りな仕事のやり方、ユニークなビジネスモデル、特徴的な製品やサービス、パーソ...
1. MySQLデータベースをダウンロードし、インストールして設定するダウンロードアドレス: htt...
1. 環境仮想マシン上で実行されているUbuntu 16.04では、コマンドuname -rを使用し...
MySQL データベースの増分バックアップを実行するには、データベース構成ファイル /etc/my....