要素の前後に文字を追加する方法｜CSSで編集【before・after】

要素の前後に文字を追加したい

要素の前後に文字を追加する場合は疑似要素《before》と《after》を利用します。

例えば、以下のようなHTMLが存在したとします。

<div class="sample">サンプル</div>

これを表示すると以下のようになります。

この「サンプル」文の前後に文字を追加します。

要素の前後に文字を追加する際には「content」プロパティと値、また、直前・直後にCSSで追加する場合は疑似要素《before》と《after》を組み合わせて利用することで表示することができます。

プロパティ「content」で文字を指定

文字を表示する場合は《content》プロパティが便利です。

セレクタ::before {
	content: "文字";
}

このプロパティの中に文字を入力することで指定されたセレクタに適応されます。

要素の前後に文字を追加【サンプル】

前後に文字を表示する場合は「content」プロパティと疑似要素を組み合わせて利用します。

要素の前後に文字を表示した場合、それぞれの書き方は以下のようになります。

前に文字を追加する《before》

要素の前に文字を追加する場合は疑似要素《before》を利用します。

以下はCSSです。

.sample::before {
	content: "文字";
	color: red;
}

実行すると、以下のようになります。

後に文字を追加する《after》

要素の前に文字を追加する場合は疑似要素《after》を利用します。

以下はCSSです。

.sample::after {
	content: "文字";
	color: green;
}

実行すると、以下のようになります。

要素の前後に文字・画像・アイコンを追加｜問題集

要素の前後に文字を追加してみよう！

要素の前後に文字を追加する方法について紹介しました。

これらの疑似要素を応用することで文字だけでなく、画像・Webアイコン等の様々なコンテンツを表示させることができます。

スタイルシートのコーティング作業では使用機会も多いので覚えておいて損は無いと思います。