::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>