特殊文字をCSSのcontentへ表示

CSSのcontentでは文字を挿入することもできますが
「&(&)」「>(>)」などの特殊文字はコードのまま出力されてしまいます。

contentで特殊文字を使うときは、16進数の数値文字参照コードの& # x を、\や0に置き換え、セミコロンをとると指定できます。

  • & → \
  • # → 0
  • x → 0

「>」の記号をCSSの擬似要素で表示

「>」の参照はこうなります

  • 文字参照 → >
  • 10進数の数値参照 → >
  • 16進数の数値参照 → >

16進数の数値参照 > の記号を置換します。

  • > → \00003E

これをCSSのcontentに設定。

// > を挿入
.btn_next::after {
	content: '\00003E';
}

ボタンに>>をスタイルで表示するサンプル

See the Pen Enter entities in CSS’s content property by webdev (@webdev-jp-net) on CodePen.0

関連記事

Pocket