::afterと::beforeを対象にコンテンツを挿入する
content
{
content
contentプロパティは:before、:after疑似要素を対象にコンテンツを挿入します。
| 初期値 | normal |
|---|---|
| 継承 | なし |
| 適用される要素 | :before、:after疑似要素 |
| モジュール | Basic User Interface Module Level 3 |
値の指定方法
コンテンツ
| none,nomal | コンテンツを挿入しません。 |
|---|---|
| 任意の文字列 | 任意の文字列がそのまま挿入されます。引用符(")で囲んで記述します。 |
| url() | 関数型の値です。括弧内に指定したURLのファイルを挿入します。 |
| counter() | 関数型の値です。括弧内に「カウンター名」を指定して、要素に連番を付けます。counter-incrementプロパティと併記して使います。 |
| attr() | 関数型の値です。括弧内に指定した属性名の値が挿入されます。 |
| open-quote | quotesプロパティで指定した開始記号が挿入されます。 |
| close-quote | quotesプロパティで指定した終了記号が挿入されます。 |
| no-open-quote | quotesプロパティの記号の階層を1段階下げます。 |
| no-close-quote | quotesプロパティの記号の階層を1段階上げます。 |
サンプルコード
CSS
.new::before{
content: "NEW!";
font-weight: bold; color: red;
}
HTML
<ul> <li class="new">ムーミンの家</li> </ul>


