content「コンテンツの挿入・置換」

「content」は、要素の前後に文字列や画像等の挿入を指定します。
疑似要素の::before、::afterとセットで指定します。

CSS Ver.	適用要素	継承
2.1	疑似要素の ::before、::after	しない

content の指定方法

構文
content : normal \| none \| 文字列 \| url \| カウンタ \| attr \| open-quote \| close-quote \| no-open-quote \| no-close-quote ;
プロパティ/設定値	意味
content : normal;	挿入しない。
content : none;	挿入しない。
content : "文字列";	挿入する文字列を引用符で囲んで指定。
content : url();	url()のカッコ内に挿入する画像等のファイルのurlを指定。
content : counter();	counter()のカッコ内にカウンタ名を指定。連番が挿入される。
content : counters();	counters()のカッコ内にカウンタ名、区切り文字を指定。入れ子の連番が挿入される。
content : attr();	attr()のカッコ内に属性名を指定。属性の値が挿入される。
content : open-quote;	「quotes」で指定された開始引用符が挿入される。
content : close-quote;	「quotes」で指定された終了引用符が挿入される。
content : no-open-quote;	引用符の挿入はないが、引用符の階層が一段階深くなる。
content : no-close-quote;	引用符の挿入はないが、引用符の階層が一段階浅くなる。
デフォルト：「タグ毎のスタイル初期値」を参照

ページTOP

content のサンプル


<style type="text/css">
.common div{
  font-family   : "メイリオ", sans-serif;
  width         : 290px;
  border        : 2px solid #6495ed;
  background    : #e7e7ff;
  padding       : 10px;
}
div.cssTitle {
  margin-top    : 10px;
  background    : #6495ed;
  color         : #fff;
  font-weight   : bold;
}
.css_content_string::before { content : "★";}
.css_content_url::before { content : url(../../../image/com_ya1.gif);}
.css_content_attr::after { content : "(" attr(cite) ")" ;}

.css_content_quote q { quotes: "『" "』" "【" "】";}
.css_content_quote q::before { content : open-quote;}
.css_content_quote q::after { content : close-quote;}

dl{ counter-reset:cnt cnts; }
.css_content_counter dd::before { 
	counter-increment:cnt; 
	content : counter(cnt) "行目．" ;}
.css_content_counters dd::before { 
	counter-increment:cnts; 
	content : counters(cnts,"-")"．" ;}
</style>

<!-- html -->
<div class="common">
  <div class="cssTitle">content: "★"</div>
  <div class="css_content_string">前に文字列が挿入される。
  </div>

  <div class="cssTitle">content: url(URL名)</div>
  <div class="css_content_url">前に画像が挿入される。
  </div>

  <div class="cssTitle">content: attr(cite)</div>
  <div>
  <blockquote class="css_content_attr" cite="https://web-designer.cman.jp/">
  後に属性内容が挿入される。</blockquote>
  </div>

  <div class="cssTitle">content: open-quote<br>content:close-quote</div>
  <div class="css_content_quote">
  <q><q>quotes</q>で指定された引用符<q>『』など</q>が挿入される。</q>
  </div>

  <div class="cssTitle">content:counter(カウンタ名)</div>
  <div>
  <dl class="css_content_counter">
  <dt>連番が挿入される。</dt>
  <dd>①</dd>
  <dd>②</dd>
  <dd>③</dd>
  </dl>
  </div>

  <div class="cssTitle">content:counters(カウンタ名)</div>
  <div>
  <dl class="css_content_counters">
  <dt>連番が挿入される。：１階層目</dt>
  <dd>①</dd>
  <dd>②</dd>
  <dd>③
    <dl>
    <dt>連番が挿入される。：２階層目</dt>
    <dd>③の１</dd>
    <dd>③の２
      <dl>
      <dt>連番が挿入される。：３階層目</dt>
      <dd>③の２の１</dd>
      </dl></dd>
    </dl></dd>
  </dl>
  </div>
</div>