HTML & CSS

最終更新日:
公開日:

レシピ

テキスト

::beforeと::afterを使って要素の前後に文字を追加する

擬似要素「::before」と「::after」を使って、特定の要素の前後にテキストや記号を追加する方法を解説します。

この記事のポイント

  • 2つの擬似要素「::before」「::after」の基本的な使い方を知る
  • 擬似要素で記号を表示する

目次

擬似要素を使って文字や記号を挿入する

CSSには::before::afterという擬似要素が用意されており、これらを使うと特定の要素の前後に文字や要素を追加することができます。

「テキスト」の前後に記号を追加している例
「テキスト」の前後に記号を追加している例

img要素video要素などの置換要素以外であれば使用可能です。

基本的な使い方

擬似要素::before::afterの基本的な使い方を紹介します。
次のようなHTMLに適用していきます。

擬似要素を適用するHTML

<section>
	<p>特定の<span>テキスト</span>の前後に文字を追加。</p>
</section>

この中のspan要素の前後に、擬似要素でテキストを挿入してみます。

擬似要素の適用例

<style>
section p span::before {
	content: "「";
	color: #7fb7da;
	font-size: 129%;
}
section p span::after {
	content: "」";
	color: #7fb7da;
	font-size: 129%;
}
</style>
<section>
	<p>特定の<span>テキスト</span>の前後に文字を追加。</p>
</section>
span要素の前後に擬似要素で鉤括弧を表示
span要素の前後に擬似要素で鉤括弧を表示

::before::afterにあるcontentプロパティで指定した文字が、span要素の前後に挿入されます。
フォントサイズや色の指定方法は通常のテキストと同じです。

記号をコードで指定して挿入する

続いて、contentプロパティに記号を指定する方法を解説します。
span要素の前後に、「"(ダブルクォーテーション)」を追加して見ましょう。

contentプロパティへの記号の指定例

<style>
section p span::before,
section p span::after {
	content: "\22";
	color: #7fb7da;
	font-size: 129%;
}
</style>
<section>
	<p>特定の<span>テキスト</span>の前後に文字を追加。</p>
</section>
contentプロパティで記号を挿入した例
contentプロパティで記号を挿入した例

"(ダブルクォーテーション)」は数値文字参照(16進数)にすると「&#x22;」となりますが、contentプロパティでは「\(バックスラッシュ)」に続いて数字部分「22」を指定することで記号が表示されます。

Note

HTMLで記号・特殊文字を表示する方法については、別記事「HTMLの記号・特殊文字の文字コード表(文字実体参照、数値文字参照)」をご覧ください。よく使う記号の文字コードに加えて、「文字実体参照」と「数値文字参照」の違いについても解説しています。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。