contentで要素の前後にコンテンツを挿入【CSS】

contentプロパティは、:before擬似要素、:after擬似要素を対象にコンテンツを挿入するプロパティです。

{content: コンテンツ;}

要するに、要素の前後に文字や画像などのコンテンツを表示することができます。

擬似要素は、要素の実体があるわけではなく、要素のようなものです。

contentの値の指定方法

contentプロパティでは、以下のような値を指定できます。

none/normal	コンテンツ挿入しない
url()	指定URLのファイル
counter()	カッコにカウンター名を指定して要素に連番を付与 ※counter-incrementプロパティを併記
attr()	属性値
open-quote	quotesプロパティで指定した開始引用符
close-quote	quotesプロパティで指定した終了引用符
no-open-quote	quotesプロパティの記号の入れ子階層が1段階下がる
no-close-quote	quotesプロパティの記号の入れ子階層が1段階上がる
任意の文字列	引用符（”）で囲んだ任意の文字列

次の例では、:before擬似要素にチェックマークの画像をcontentプロパティで挿入しています。

先頭にチェックマークを挿入