この記事では、CSS でのコンテンツの変更について説明します。
CSS でコンテンツを変更する方法
CSS のコンテンツを変更するには、以下のメソッドを使用します。
それぞれの方法を1つずつ見ていきましょう！
方法 1: ::after セレクターと content プロパティを使用して CSS のコンテンツを変更する
「 ：：後 ” セレクターは、CSS を使用して HTML 要素の後に指定されたコンテンツを配置します “ コンテンツ ' 財産。この操作は、選択した要素にコンテンツを追加するのに役立ちます。さらに、「 画面 」プロパティを利用して、既存のコンテンツを非表示にすることができます。
::after セレクターを使用して CSS のコンテンツを変更する方法を理解するために、以下の例を見てみましょう。
例
これが、「」というテキストを含む HTML ページです。 おはよう！！！ 」。追加されたコンテンツを置き換えましょう:
現在、「 HTML ファイルの body セクションにテキストを含む ' タグを付けます。
< p > おはよう！！！ < / p >CSS ファイルでは、::after セレクターを「 本体::後 」と「 コンテンツ ”値を持つプロパティ” こんばんは 」 その定義内。その結果、CSS セレクターは、書かれたテキストの直後にテキストを配置します。最後に、「 画面 」プロパティを作成し、その値を「 なし 」：
< スタイル >本体::後 {
コンテンツ : 'こんばんは' ;
}
p {
表示: なし;
}
< / スタイル >
ここで、HTML ファイルを保存し、ブラウザで開くか、 「ライブサーバー 」 同じ目的で：
ご覧のとおり、::after CSS セレクターを使用してコンテンツが正常に変更されました。
方法 2: ::before Selector を content プロパティと共に使用して CSS のコンテンツを変更する
CSS では、「 ：：前 」セレクターは、要素の既存のコンテンツの直前にコンテンツを表示するために使用されます。 「」と組み合わせて使用できます。 コンテンツ 」プロパティを使用して、選択した要素に新しいコンテンツを追加します。
例
本文の直後の ::before セレクターを「」のように指定します。 本体::前 」。これにより、新しいコンテンツが既存のコンテンツの前に配置されます。他のすべてのプロパティは前の例と同じままであることに注意してください。
< スタイル >本体::前 {
コンテンツ : 'こんばんは' ;
}
p {
表示: なし;
}
< / スタイル >
出力
CSS でコンテンツを変更するさまざまな方法について説明しました。
結論
内容を変更するには、「 ：：後 ' と ' ：：前 」 CSS セレクターは、「 コンテンツ ' 財産。最初のアプローチでは、指定されたテキストが選択された要素の後に追加されますが、2 番目の CSS セレクターは逆の働きをします。さらに、「 画面 」プロパティを使用して、要素の既存のコンテンツを非表示にすることができます。このように、CSS でコンテンツが完全に変更されます。 CSS でコンテンツを変更する 2 つの方法について説明しました。