CSSコンテンツプロパティ

例

次の例では、各<a>要素の後に括弧内のhref属性の値を挿入します。

a::after {
content: " (" attr(href) ")";
}

以下の「自分で試してみてください」の例をもっと見てください。

定義と使用法

このcontentプロパティは、生成されたコンテンツを挿入するために、 :: beforeおよび:: after疑似要素とともに使用されます。

デフォルト値：	正常
遺伝性の：	いいえ
アニメート可能：	番号。アニメート可能について読む
バージョン：	CSS2
JavaScript構文：	JavaScriptを使用して要素に疑似クラスを与えることはできませんが、同じ結果を得るには他の方法があります。

ブラウザのサポート

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

Property
content	1.0	8.0	1.0	1.0	4.0

CSS構文

プロパティ値

Value	Description	Example
normal	Default value. Sets the content, if specified, to normal, which default is "none" (which is nothing)
none	Sets the content, if specified, to nothing
counter	Sets the content as a counter
attr(attribute)	Sets the content as one of the selector's attribute
string	Sets the content to the text you specify
open-quote	Sets the content to be an opening quote
close-quote	Sets the content to be a closing quote
no-open-quote	Removes the opening quote from the content, if specified
no-close-quote	Removes the closing quote from the content, if specified
url(url)	Sets the content to be some kind of media (an image, a sound, a video, etc.)
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

その他の例

例

<ul>または<ol>の箇条書きの色を追加するには、デフォルトの箇条書きを削除し、箇条書き（＆bull;）のようなHTMLエンティティを追加します。

ul {
list-style: none; /* Remove HTML 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 */
}

CSSリファレンス

CSS Properties