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

contentプロパティ

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

Syntax

CSS

content: normal | none | counter | attr | 文字列 | open-quote | close-quote | no-open-quote | no-close-quote | url | 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終わりののダブルコーテーションを消す
url(URL)画像、音楽、動画などのメディアを挿入
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

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