content
- ブラウザ
内容の生成
content: 値;
要素の前後に内容（文字列や画像等）を追加するプロパティです。
このプロパティは、疑似要素の :before または :after と組み合わせて使用します。
content: "文字列";
content: url(icon.gif);
content: attr(title);
| プロパティ名 | 値 | 説明 |
|---|---|---|
| content | "文字列" | 指定した文字列を追加する （文字列は引用符で囲む） |
| url(URI) | 指定したURIの画像等を追加する | |
| attr(属性名) | 指定した属性の値を表示する | |
| open-quote | quotesプロパティで設定されている開始引用符を挿入する （入れ子の深さに応じた引用符が使用される） | |
| close-quote | quotesプロパティで設定されている終了引用符を挿入する （入れ子の深さに応じた引用符が使用される） | |
| no-open-quote | 開始引用符を挿入したことにして、quotesプロパティで設定されている引用符の入れ子の深さを一段階深くする （引用符は挿入されない） | |
| no-close-quote | 終了引用符を挿入したことにして、quotesプロパティで設定されている引用符の入れ子の深さを一段階浅くする （引用符は挿入されない） |
- SafariとChromeは、引用符関連の値（open-quote、close-quote、no-open-quote、no-close-quote）に対応していないようです。
- 追加される文字列中に「\A」を挿入すると、その部分で改行させることができます。
- 「カウンタ」に関連する内容は省略させていただきました。
.example1 p:before {
content: "注意：";
}
.example2 p:before {
content: url(icon.gif);
}
q {
quotes: "「" "」" "『" "』";
}
q:before {
content: open-quote;
}
q:after {
content: close-quote;
}
q[cite]:after {
content: close-quote "（引用元：" attr(cite) "）";
}
継承
継承しない
初期値
空文字
メディア
- all
