CSSの前後で疑似要素を使用する方法
CSS の前後で疑似要素を使用するにはどうすればよいですか?この記事では、CSS の前後で疑似要素を使用する方法を説明します。
::before と ::after とは何ですか?
前後の説明は次のとおりです
元素::before {content:插入的内容;}
元素::after {content:插入的内容;}content: 挿入するコンテンツの一部を入力してください
コンテンツに文字や記号を挿入するには、 「」を使用してください。立ち上がって入ります。
画像や音声をコンテンツに挿入するには、URL (ターゲット パス) を入力してください。
同じ要素の前後を指定することもできます。
CSS3 の before や after などの疑似要素には :: (二重コロン) が使用されますが、コロンが 1 つだけでもほとんどのブラウザで認識され、正しく動作します。
サポートされるブラウザ
::before および ::after 疑似要素をサポートするブラウザ: Chrome、Firefox3.5 ～、Safari4 ～、IE8 ～、オペラ６～。
疑似要素を前後に使用するにはどうすればよいですか?
以下は、前後に適用される HTML ファイルです。
(これは、*html ファイルと css ファイルが同じディレクトリにあり、外部スタイル シートのファイル名が"sample.css")
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<h3 id="标题前加入标记">标题前加入标记</h3>
<p>段落前插入图像</p>
</body>
</html>h3::before{
content:"◆";
}
p::before{
content:url(img/luffys.jpg);
}の見出しの前に記号「♦」が挿入されます。
画像ファイル「img/luffys.jpg」の段落の前。
ブラウザ上ではタイトルの前に「◆」があり、段落の前に画像ファイルが挿入されているように表示されます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<h3 id="在标题之前和之后加入标记">在标题之前和之后加入标记</h3>
<p>段落后插入图像</p>
</body>
</html>h3 :: before {content："◆";}
h3 :: after {content："◆";}
p :: after {content：url（img/luffys.jpg）;}見出しの先頭と末尾に記号「♦」が挿入され、段落の後に画像が挿入されます。
ブラウザ上では次のように表示されます。タイトルの前後に記号が追加され、段落の後に画像が追加されます。
2 つの疑似要素があります: /: の前と :: / : の前：後。
css2では、:前 /:後のようにコロンを書きます。
css3 では、:: の前 / :: のようにコロンを 2 つ書きます。
css3は最新のcssなので、擬似要素は::前/::後とも言えます。
::before / ::after については、メインブラウザと互換性があります。
ただし、CSS3 の一部の構文は主要なブラウザと互換性がないことに注意してください。
以上がCSSの前後で疑似要素を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1664
14
1423
52
1317
25
1268
29
1246
24
なぜ疑似要素が失敗するのでしょうか?
Nov 21, 2023 pm 05:13 PM
疑似要素が失敗する理由: 1. セレクターの問題、2. スタイルの競合、3. 継承の問題、4. 構文エラー、5. ブラウザーの互換性の問題など。詳細な紹介: 1. セレクターの問題、疑似要素のセレクターが正しくないため、ターゲット要素が選択されない可能性があります; 2. スタイルの競合、CSS でスタイルの競合がある場合、疑似要素が無効になる可能性があります; 3.継承の問題、疑似要素が特定のスタイル属性を継承しない可能性がある; 4. 構文エラー CSS に構文エラーがある場合、疑似要素が失敗する可能性がある; 5. ブラウザの互換性の問題など。
css擬似セレクター学習擬似クラスセレクター解析
Aug 03, 2022 am 11:26 AM
前回の記事「Css擬似セレクターの学習 - 擬似要素セレクターの解析」では擬似要素セレクターについて学習しましたが、今回は擬似クラスセレクターについて詳しく見ていきます。
CSS::placeholder疑似要素セレクターのさまざまなアプリケーションシナリオを実装する
Nov 20, 2023 pm 03:17 PM
CSS::placeholder 疑似要素セレクターの複数のアプリケーション シナリオを実装するには、特定のコード サンプルが必要です。Web 開発では、CSS は、Web ページのレイアウトとスタイルを制御するために一般的に使用されるスタイル シート言語です。 ::placeholder 疑似要素セレクターは、CSS3 の新しいセレクターであり、入力ボックス (テキスト入力ボックス、パスワード入力ボックスなどを含む) のプレースホルダー スタイルを変更するために使用されます。以下では、さまざまなアプリケーション シナリオを紹介し、対応するコード例を示します。入力ボックスのプレースホルダーの色を変更します。
なぜホバーは擬似要素なのでしょうか?
Oct 09, 2023 pm 05:45 PM
Hover は擬似要素ではなく、擬似クラスです。疑似クラスは要素の特定の状態や動作を選択するために使用され、疑似要素は要素の特定の部分にスタイルを追加するために使用されます。 :hover は、要素の特定の部分にスタイルを追加するのではなく、要素の特定の状態を選択するために使用されるため、:hover 疑似クラスを使用して要素のマウスオーバー状態のスタイルを設定することができます。また、:hover を使用することもできます。リンクにホバー効果を追加する疑似クラス。リンク上にマウスを置くと、リンクの色、背景色などが変化します。
疑似クラスと疑似要素の違いは何ですか?
Dec 05, 2023 am 11:24 AM
疑似クラスと疑似要素の違いは次のとおりです: 1. 疑似クラスは特定の要素に特殊効果を追加するために使用されますが、疑似要素は特定の要素の前後にコンテンツやスタイルを追加するために使用されます; 2. 疑似要素 クラスは通常、表現されます。単一のコロン「:」で表されますが、疑似要素は通常、二重コロン「::」で表されます。
擬似要素とは
Oct 09, 2023 pm 05:01 PM
疑似要素は、要素上の特定の位置にコンテンツを挿入するために使用される CSS の特別なセレクターです。これらは、HTML ドキュメント内に実際に存在する要素ではなく、CSS を通じて作成されるため、「疑似要素」と呼ばれます。 。これは、要素の前後、または要素内の特定の場所にコンテンツを挿入するために使用でき、通常は装飾効果を追加したり、要素の外観を変更したりするために使用できます。 CSS では、単一のコロンで表現される疑似クラスと区別するために、疑似要素は単一のコロンではなく二重のコロンで表現されます。
疑似要素を追加すると何の役に立つのでしょうか?
Oct 09, 2023 pm 05:45 PM
擬似要素は、装飾効果の作成、特定のレイアウト効果の実現、インタラクティブ効果の作成、特定の要素の状態の変更、およびいくつかの特殊効果の作成に使用できます。詳細な紹介: 1. 装飾効果の作成:before または :after 擬似要素のコンテンツ属性とスタイルを設定することで、要素の前後にアイコン、図形、その他の装飾要素を挿入して、さらに要素を追加できます。 Web ページへの視覚的なアピールとパーソナライゼーション 2. :before および :after 擬似要素などを通じて作成できる、特定のレイアウト効果を実現します。
CSS 疑似クラスと疑似要素の基本概念と使用シナリオを調べる
Dec 23, 2023 pm 01:21 PM
CSS 疑似クラスと疑似要素の基本概念と応用シナリオを理解します。CSS (CascadingStyleSheets) は、Web ページのスタイルを記述するために使用されるマークアップ言語です。Web ページ内の要素の外観とレイアウトを制御できます。 CSS では、疑似クラスと疑似要素は、CSS の適用範囲と柔軟性をさらに拡張できる非常に便利な機能です。 1. 擬似クラス 擬似クラスは、特定の状態要素を選択するために使用されるキーワードです。一般的な疑似クラスには、ホバー、アクティブ、フォーカスなどが含まれます。以下に一般的なものをいくつか示します
