content

beforeやafterと併用することによって、画像やテキスト等を表示させることができます。


ブラウザ

N6 / N7 / O6 / O7 / O9 / Fx1 / Fx2

▲PageTop

書式

要素[.class名][#id名]:[after][before]{ content : 値; }

▲PageTop

指定できる値

値 初期値 意味
テキスト empty テキストを表示します。

記述の仕方
"任意の文字列"
URL 画像を表示します。

記述の仕方
url(任意のURL)
counter カウントします。

記述の仕方
content : "任意の文字列" counter(変数a);
counter-increment : 変数a;
counter-reset : 変数a 初期化の値; }
openquote/close-quote 引用符を表示します。

記述の仕方
content : openquote;
content : close-quote;
no-open-quote/no-close-quote 非表示の引用符を入れることで、引用レベルを変化させることが出来ます。
attr(X) 属性名に指定した値を表示します。

記述の仕方
content : attr(要素自身が持っている属性名)
inherit 親要素の値を継承します。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      #sample1:before{
        content : "会員No."counter(no)" ";
        counter-increment : no;
        counter-reset : 0;
      }
      #sample2:before{
        content : open-quote;
      }
      #sample2:after{
        content : close-quote;
      }
      #sample3:after{
        content : attr(type);
      }
    </style>
  </head>
  <body>
    サンプル1<br>
    ゴルフクラブ会員<br>
    <div id="sample1">島田さん</div>
    <div id="sample1">加藤さん</div>
    <div id="sample1">服部さん</div>
    <br>
    サンプル2<br>
    <div id="sample2">出産マシーン</div>といったのは誰？<br>
    <br>
    サンプル3<br>
    このボタンのタイプは<input type="checkbox" id="sample3">です。
  </body>
</html>

表示結果

サンプル1
ゴルフクラブ会員
島田さん
加藤さん
服部さん

サンプル2
出産マシーン
といったのは誰？

サンプル3
このボタンのタイプは です。

▲PageTop

関連項目

CSS

after / before / quotes / coutner-increment / counter-reset

▲PageTop

▲