CSS::before 疑似要素セレクターの適用と実装の効果

CSS::before 擬似要素セレクターのアプリケーションと実装による効果

CSS::before 擬似要素セレクターは、CSS で一般的に使用される擬似クラス セレクターです。これにより、要素のコンテンツの前に仮想要素を挿入したり、CSS スタイルを通じて装飾したり美化したりできます。この記事では、::before 疑似要素セレクターの適用と実装の効果を紹介し、参考として具体的なコード例を示します。

1. アプリケーション シナリオ

1. テキスト装飾: テキストの前にアイコン、ラベル、画像、その他のコンテンツを挿入して、テキストの表現力を高めます。画像の装飾: 画像の前に影、境界線、その他の効果を追加して、画像の美しさを高めます。
2. リストの装飾: リストの項目にロゴやシリアル番号を追加して、リストの読みやすさを高めます。 ;
3. カスタム ラベル: ::before 擬似要素セレクターを渡して、カスタマイズされたラベル効果を実現します;
4. 背景装飾: ::before 擬似要素セレクターを使用して、背景、境界線、その他の効果を追加しますコンテナ要素に。
5. 2. 実装効果の例

テキスト装飾の例

1. <style>
     .icon::before {
       content: "002";
       font-family: "Font Awesome 5 Free";
       color: red;
       margin-right: 5px;
     }
   </style>
   
   <p class="icon">CSS ::before伪元素选择器示例</p>

上記のコードでは、Font Awesome アイコン ライブラリを使用して装飾を行います。テキスト アイコンを追加し、赤色と右マージンを設定します。

画像の装飾の例

2. <style>
     .image-container::before {
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-color: rgba(0, 0, 0, 0.5);
       opacity: 0;
       transition: opacity 0.3s ease;
     }
     
     .image-container:hover::before {
       opacity: 1;
     }
   </style>
   
   <div class="image-container">
     <img src="example.jpg" alt="Example Image">
   </div>

上記のコードでは、画像コンテナーに半透明の黒いマスクを追加します。マウスを画像の上に置くと、その透明度が変化します。マスクが1になり、写真の美化効果を実現します。

リストの装飾の例

3. <style>
     ul li::before {
   
       color: red;
       margin-right: 5px;
     }
   </style>
   
   <ul>
     <li>列表项一</li>
     <li>列表项二</li>
     <li>列表项三</li>
   </ul>

上記のコードでは、リスト項目の装飾効果を実現するために、リストのシンボルとして実線のドットを使用しています。

カスタム タグの例

4. <style>
     .custom-tag::before {
       content: "Tag: ";
       font-weight: bold;
     }
   </style>
   
   <p class="custom-tag">自定义标签示例</p>

上記のコードでは、カスタム タグを段落に追加します。これは、::before 疑似要素セレクターを通じて実装されます。

背景装飾の例

5. <style>
     .container::before {
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-image: url(background.jpg);
       background-size: cover;
       opacity: 0.5;
       z-index: -1;
     }
     
     .content {
       position: relative;
       z-index: 1;
     }
   </style>
   
   <div class="container">
     <div class="content">
       <h1>背景装饰示例</h1>
       <p>这是一段示例文本。</p>
     </div>
   </div>

上記のコードでは、背景画像をコンテナ要素に追加し、制御する z-index 属性を通じて不透明度を 0.5 に設定しました。そのレベルを調整し、背景の装飾効果を実現します。

3. 概要

CSS ::before 擬似要素セレクターを通じて、さまざまな装飾効果を実現し、Web ページ要素にさらなる美しさと表現力を加えることができます。 ::before 疑似要素セレクターを使用する場合は、セレクターの記述方法に注意し、挿入されたコンテンツを content 属性で指定し、他の CSS スタイルで装飾および美化する必要があります。この記事で提供されているサンプル コードが、::before 疑似要素セレクターの理解を深め、適用するのに役立つことを願っています。

以上がCSS::before 疑似要素セレクターの適用と実装の効果の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。