CSS のコンテンツを変更する

1. :after 疑似要素と display プロパティを使用して、CSS のテキストを置き換える
2. 擬似要素 :before と visibility プロパティを使って CSS でテキストを置き換える

チュートリアルでは、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';
}