content プロパティは、生成するコンテンツを挿入するために :before と :after 擬似要素と一緒に使用します。

デフォルト値：	normal
継承：	継承する
アニメーション可否：	不可。animatable を参照
バージョン：	CSS2
JavaScript 構文：	You can't give an element a pseudo-class by using JavaScript, but there are other ways to get the same result: Try it

ブラウザ・サポート

表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。

プロパティ
content	1.0	8.0	1.0	1.0	4.0

注: IE8は、!DOCTYPE を指定した場合のみ content プロパティをサポートします。

CSS 構文

プロパティの値

値	説明	例
normal	デフォルト値。デフォルトが "none"（コンテンツを生成しない）である normal をコンテンツに設定します	Try it ❯
なし	指定した場合、コンテンツには何も設定しません	Try it ❯
counter	カウンタをコンテンツに設定します	Try it ❯
attr(attribute)	セレクタ属性の属性値をコンテンツに設定します	Try it ❯
string	>指定のテキストをコンテンツに設定します	Try it ❯
open-quote	開き引用符をコンテンツに設定します/td>	Try it ❯
close-quote	閉じ引用符をコンテンツに設定します	Try it ❯
no-open-quote	指定されていれば、コンテンツから開き引用符を削除します	Try it ❯
no-close-quote	指定されていれば、コンテンツから閉じ引用符を削除します	Try it ❯
url(url)	ある種類のメディア（画像、音、ビデオなど）をコンテンツに設定します	Try it ❯
initial	プロパティにデフォルト値を設定します。initial を参照
inherit	このプロパティは親要素を継承します。inherit を参照

例

デフォルトの中点を削除して、中点のように見える HTML エンティティ（•）を追加した後に、 <ul> または <ol> の中点に色を追加する方法：

ul {
    list-style: none; /* Remove list bullets */
    padding: 0;
    margin: 0;
}

li {
    padding-left: 16px;
}

li:before {
    content: "•"; /* Insert content that looks like bullets */
    padding-right: 8px;
    color: blue; /* Or a color you prefer */
}

Try it Yourself ❯

CSS content プロパティ

例

定義と用法

ブラウザ・サポート

CSS 構文

プロパティの値

その他の例

例

関連ページ