今日の記事では主に 4 つの CSS スタイル 疑似要素を紹介します。説明した CSS 疑似要素はどれも日常生活でよく使われるものです。それでは、この記事を一緒に見てみましょう。
まず、この記事で紹介した CSS スタイルの 4 つの疑似要素を見てみましょう:
:before この疑似要素は、要素
の前にコンテンツを追加するように定義されています。 after この擬似要素は、要素の後にコンテンツを追加で定義されています
:first-line この擬似要素は、テキストの最初の行に特別なスタイルを追加します
:first-letter この擬似要素は、特別なスタイルを追加しますstyleをテキストの最初の文字にします
これら4つ これらの疑似要素は、コードを記述するときによく使用される要素です。
次に最初の要素を見てみましょう:
:before、この要素は要素の前にコンテンツを追加します。
理解するために完全な例を見てみましょう:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>PHP中文网</title> </head> <body> <P>我是一个段落，这一段只有我这一句话</P> </body> </html>
これは通常のテキストドキュメントであり、表示は正常です。最初に画像を見て、次に比較してください:
これは次のとおりです。通常の段落 次に、CSS スタイルの疑似要素を挿入して効果を確認しましょう:
CSS スタイルを先頭に追加します:
<style type="text/css">
p:before{content: "这里是PHP中文网"}
</style> 結果は、p タグ内のテキストが同じテキストになります。ブラウザに表示される効果を見てください:
その効果は、p タグの前にありますか?
最初の before 疑似要素について説明しましたが、次に 2 番目の疑似要素について話しましょう:
:after: 要素の後にコンテンツを追加するのも非常に簡単で、前のコードの before を after に置き換えるだけです。 。
コードを見てみましょう:
 "153636975263445CSS擬似要素とは何ですか? CSS 疑似要素の詳細な紹介 (例を含む)")
<title>PHP中文网</title>
<style type="text/css">
p:after{content: "这里是PHP中文网"}
</style>
</head>
<body>
<P>我是一个段落，这一段只有我这一句话</P>
</body>さて、コードは完成しました。ブラウザに表示される効果が上で述べたことと同じかどうか見てみましょう:
それは内容とまったく同じです。と述べられているので、最後にコンテンツが追加されたことは明らかです。
次に、3 番目の疑似要素の使用法について説明します。
: first-line: 最初の行の変更を設定し、2 行目は変更されません。
例を見てみましょう:
<title>PHP中文网</title>
<style type="text/css">
p:first-line{color:red}
</style>
</head>
<body>
<P>我是一个段落，这一段只有我这一句话；我是一个段落，这一段只有我这一句话；我是一个段落，这一段只有我这一句话；我是一个段落，这一段只有我这一句话；我是一个段落，这一段只有我这一句话；我是一个段落，这一段只有我这一句话</P>
</body> 最初の行に表示されるため、テキストのコピーをいくつかコピーしました。ブラウザによって表示される効果を見てみましょう:
CSS 学習マニュアル にアクセスして学習してください)
最後のものは次のとおりです: first-letter pseudo-element: :first-letter: これは、テキストの最初の文字。 上記のテキストの最初の文を英語に変更しました:<style type="text/css">
p:first-letter{color:red}
</style>
css 学習マニュアル のコラムにアクセスして学習してください)。ご質問がございましたら、以下にメッセージを残してください。
【編集者のおすすめ】CSSテーブルに枠線スタイルを追加するにはどうすればよいですか？ CSS テーブルの境界線スタイルの概要 (完全な例付き)
HTML タグのマウスオーバーで色を変更する方法、CSS でタグのマウスオーバー スタイルを詳細に制御する方法
以上がCSS擬似要素とは何ですか? CSS 疑似要素の詳細な紹介 (例を含む)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
