Home / 要素の直前・直後に文字列や画像を表示する設定 / 要素の前後に文字列や画像を表示する方法 : content

要素の前後に文字列や画像を表示する方法 : content

::: 書 式 :::
・直前に文字列を表示する場合
  要素名:before{ content: "文字列" }

・直前に画像を表示する場合
  要素名:before{ content: url(画像のURL) }


・直後に文字列を表示する場合
  要素名:after{ content: "文字列" }

・直後に画像を表示する場合
  要素名:after{ content: url(画像のURL) }

::: 解 説 :::
content」プロパティで、要素の前後に文字列や画像を表示することができます。

:before」または「:after」と組み合わせて使用します。

::: 対応ブラウザ :::
IE Firefox Opera Chrome Safari
8 7 6 5.5 5 3.5 3 2 1.5 1 10 9 8 7 6 2 1 4 3 2 1
× × × ×
[ 対応状況 : ○=対応、△=一部対応、×=未対応 ]

::: サンプル ::: [ サンプル画面 スタイルシート(CSS)サンプル画面 ]


関連項目