備忘録的プログラミングリファレンス

content プロパティ

 content プロパティは、エレメントの前後に文字列や画像などのコンテンツを挿入するプロパティです。 content プロパティが機能するのは::beforeおよび::after擬似エレメントのみです。

テキストの前にマークを付ける(Exampleを参照する
h3::before {
	content: "♡";
}

 counter-incrementcounter-resetプロパティを利用して番号付けをすることもできます。

ページ内 Index

Syntax

CSS

content: normal | none | counter | attr | 文字列 | open-quote | close-quote | no-open-quote | no-close-quote | <image> | initial | inherit ;

DOM ( JavaScript )

content プロパティを直接操作できるScriptはありません。あらかじめ定義したcontent プロパティを表示や非表示にする方法はあります。

<style>
.example_content::before {
  content: " ◯ ";
}
</style>
...
<p id="example_c">Tokyo</p>
...
<script>
function func_Content() {
  document.getElementById("example_c").className += "example_content";
}
</script>

値(Values)

Value摘要
normal初期値(default値)、何も表示しない
none何も表示しない
counter番号を付ける、counter-resetcounter-incrementプロパティと併用
attr(attr_name)エレメントの属性の値を表示
文字列文字列の表示
open-quote始まりのダブルコーテーション「“」
close-quote終わりののダブルコーテーション「”」
no-open-quote始まりのダブルコーテーションを消す
no-close-quote終わりののダブルコーテーションを消す
<image>画像や描写を利用
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

初期値(Default value)normal
継承(Inherited)No
変化(Animatable)No

Example

 contentの例です。各<h3>エレメントの前に自動でマークが付加されます。