【content】前後にテキストや画像を入れる

contentプロパティは、要素の前後に内容を新しく追加(生成)したい時に使用します。

contentは疑似要素の「:before」「:after」と併せて使用する事で、その要素の直前、あるいは直後にテキストや画像、番号などを追加(生成)することができます。 必要な値を任意の順序で並べ、半角スペースで区切って複数指定する事も可能です。

なお要素の直前に内容を追加したい場合は「:before」、直後に追加したい場合は「:after」に対して設定して下さい。

またcontentでテキストなどを追加した場合、ブラウザ上には表示されますが、htmlソース上には表示されません。

※検索エンジンに文字として認識されないため、seo上重要なキーワードを入れても認識されません。

書式

  • content : ……… テキストや画像などの内容を追加する

★:normal、テキスト、inherit、他下記参照

normal
内容を追加しません。なお「:before{content: normal;}」の場合はボックスを生成しませんが、「:before{content:"";}」のようにした場合ボックスは生成されます。
none
内容を追加しません。
テキスト(文字列)
追加するテキストを引用符「""」で囲って指定します。なお改行したい場合は「¥A」を記述し、併せて「white-space: pre;」を指定するとそこで改行されます。
※content:"";内では<BR>などのhtmlタグは使用できません。
URL
url("URL")のようにして、追加する画像や音声データなどのurlを指定します
カウンタ
要素内容に自動で連番を付ける事ができます。counter()関数、counters()関数で追加するカウンタ(連番)を指定します。詳しくはcounter-increment、counter-resetのページを参照下さい。
attr(属性名)
追加するテキストを値に持つ属性名を指定します。例えば「a:after{content: "("attr(href)")";}」というようにすると、リンク(a要素)の直後にhref属性の値が(url)の形式で表示されます。なお要素に対して記述した属性が指定されていない場合は、何も表示されません。
open-quote、close-quote
open-quoteで要素の先頭、close-quoteで要素の最後にquotesプロパティで設定されている引用符を追加します。
no-open-quote、no-close-quote
引用符を追加せず、quotesプロパティで設定した引用符の入れ子の深さ(多重度)を1段階深く(no-open-quote)、または1段階浅く(no-close-quote)します

使用した時の例

.sample1:after {content: normal;}
.sample2:after {content: none;}
.sample3:after {content: "★追加しました★¥A◆ここで改行◆"; white-space: pre;}
.sample4:after {content: url("image.png");}
.sample5:after {content: counter(capter) ". ";}
.sample6:after {content: "(" attr(title) ")";}
.sample6-2:after {content: "(" attr(href) ")";}
.sample7:before {content: open-quote;}
.sample7:after {content: close-quote;}
.sample8:after {content: no-open-quote;}
.sample9:after {content: no-close-quote;}

div:after,div:before,span:after,span:before{color:red;}
<div class="sample1">normal......追加しません</div>
<div class="sample2">none......追加しません</div>
<div class="sample3">テキスト......テキストを追加</div>
<div class="sample4">url......画像を追加</div>
<div class="sample5">カウンタ......連番を追加(記述した「.」も追加)</div>
<div class="sample6" title="title部分">attr()......ここでは「title」を追加</div>
<div>attr()......「href」の場合<a href="https://www.yuu-diaryblog.com/hp-web/css/" class="sample6-2">cssリファレンス</a></div>
<div class="sample7">open-quote,close-quote......引用符を追加</div>
<div class="sample8">no-open-quote......<span class="sample7">引用符を1段深く</span>します</div>
<div class="sample9">no-close-quote......<span class="sample7">引用符を1段浅く</span>します</div>

ブラウザ上の表示例

normal……追加しません
none……追加しません
テキスト……テキストを追加
url……画像を追加
カウンタ……連番を追加(記述した「.」も追加)
attr()……ここでは「title」を追加
attr()……「href」の場合cssリファレンス
open-quote,close-quote……引用符を追加
no-open-quote……引用符を1段深くします
no-close-quote……引用符を1段浅くします

対応ブラウザなどのデータ

初期値 normal 値の継承 継承しない
適用可能な要素 :before疑似要素,:after疑似要素
メディア visual / content
対応ブラウザ Internet Explorer8~ , Google Chrome1~ , Firefox1~ , Opera4~ , Safari1~

関連情報