CSS content Property

例

次の例では、各リンクの後の括弧内にURLを挿入します。

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

もっと"Try it Yourself"以下の例。

定義と使用法

contentプロパティを一緒に使用されていますし、前に：擬似要素の後、生成されたコンテンツを挿入します。

デフォルト値：	normal
継承されました：	no
アニメーション：	no. Read about 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

Note: ！のDOCTYPEが指定されている場合IE8のみcontentプロパティをサポートしています。

CSSの構文

プロパティ値

値	説明	例
normal	デフォルト値。ありませんこれはデフォルト、指定された場合、正常にコンテンツを設定し"none" (which is nothing)	Try it »
none	コンテンツ、指定された場合は、何も設定します。	Try it »
counter	カウンタなどのコンテンツを設定します。	Try it »
attr (attribute)	一つとしてコンテンツ設定selector's属性を	Try it »
string	あなたが指定したテキストにコンテンツを設定します。	Try it »
open-quote	コンテンツは、開口部の引用に設定します	Try it »
close-quote	コンテンツは、右引用符に設定します	Try it »
no-open-quote	指定された場合、コンテンツから開口部の引用を削除します。	Try it »
no-close-quote	指定された場合、コンテンツから終了引用符を削除します。	Try it »
url( url )	コンテンツは、メディアのいくつかの種類に設定します(an image, a sound, a video, etc.)	Try it »
initial	このプロパティがデフォルト値に設定します。初期についての記事を読みます
inherit	その親要素からこのプロパティを継承します。継承についての記事を読みます

その他の例

例

以下のための弾丸の色を追加する方法<ul>や<ol>そのデフォルトの弾丸を除去し、弾丸のように見えるHTMLエンティティ追加することで、 (•)

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 */
}

»それを自分で試してみてください

CSS 参照

CSS プロパティ