content プロパティ
content プロパティは、エレメントの前後に文字列や画像などのコンテンツを挿入するプロパティです。 content プロパティが機能するのは::beforeおよび::after擬似エレメントのみです。
h3::before {
content: "♡";
}
counter-increment、counter-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-reset、counter-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>エレメントの前に自動でマークが付加されます。