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