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

特定の要素の前後にテキストや記号を追加できる擬似要素「::before」と「::after」を解説。

事例

span要素の前後にかぎかっこを挿入

section p span::before {
content: "「";
color: #7fb7da;
font-size: 129%;
}
section p span::after {
content: "」";
color: #7fb7da;
font-size: 129%;
}

フォントサイズや色の指定方法は通常のテキストと同じ。

span要素の前後にダブルコーテーションを挿入

<style>
section p span::before,
section p span::after {
	content: "\22";
	color: #7fb7da;
	font-size: 129%;
}
</style>
<section>
	<p>特定の<span>テキスト</span>の前後に文字を追加。</p>
</section>

contentプロパティでは「(バックスラッシュ)」に続いて数字部分「22」を指定することで記号が表示される。