CSS のコンテンツを変更する
![CSS のコンテンツを変更する](/img/CSS/feature-image---css-change-content.webp)
チュートリアルでは、CSS のコンテンツを変更または置換するいくつかの方法を紹介します。
:after
疑似要素と display
プロパティを使用して、CSS のテキストを置き換える
CSS の疑似要素を使用して、HTML で記述されたコンテンツを変更または置換できます。次に、:after
疑似要素と content
プロパティを使用して、目標を達成します。
:after
セレクターを使用して、選択したコンテンツの後にコンテンツを追加します。コンテンツを追加するには、content
プロパティを使用します。
content
プロパティの値として目的のコンテンツを書き込むことができます。コンテンツを置き換えたり変更したりするには、以前に作成したコンテンツを非表示にして、content
プロパティを使用し、:after
セレクターで要素を選択します。
このメソッドは、display
プロパティを none
に設定して、前のテキストを非表示にします。
たとえば、クラス text
で div
を作成します。div
内に、span
タグと the original text
を span
内に書き込みます。
CSS で、スパンを選択し、その display
プロパティを none
に設定します。次に、:after
セレクターを使用して text
クラスを選択します。
最後に、content
プロパティを記述し、その値を本文の the changed text
に設定します。
以下の例のコードスニペットを実行すると、the changed text
が表示されます。ここでは、テキスト the original text
がドキュメントから削除され、要素が存在しないように機能します。
これは、content
プロパティの値がそのスペースを占めるためです。その結果、新しいコンテンツが表示されます。
<div class="text">
<span>the original text</span>
</div>
.text span {
display: none;
}
.text:after {
content: 'the changed text';
}
擬似要素 :before
と visibility
プロパティを使って CSS でテキストを置き換える
CSS の:before
疑似要素を使用して、HTML で記述されたコンテンツを変更できます。 :before
疑似要素は:after
疑似要素と同様に機能しますが、内容はここに示されています。
選択した要素の前にコンテンツを書き込むために使用します。このメソッドは、最初のメソッドと同様に content
プロパティを使用します。
さらに、visibility
プロパティを使用して前のコンテンツを非表示にし、hidden
に設定することができます。
hidden
に設定すると、visibility
プロパティはコンテンツを非表示にしますが、ドキュメントには空白が表示されます。ただし、:before
セレクターを使用すると、スペースが新しいコンテンツで上書きされます。
たとえば、最初の方法で使用した例では、span
要素を選択し、その visibility
プロパティを hidden
に設定します。
ただし、以前に適用したスタイルを削除することを忘れないでください。次に、:before
セレクターで text
クラスを選択し、次の例のように新しいコンテンツを書き込みます。
前のコンテンツを非表示にするには、display:none
を使用します。ただし、:after
セレクターを使用している間は、非表示の要素のスペースが保持されるため、visibility:hidden
を使用することはできません。
<div class="text">
<span>before</span>
</div>
.text span {
visibility:hidden;
}
.text:before {
content: 'after';
}
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.
LinkedIn