before

要素の前にテキスト、もしくは画像を表示させます。


ブラウザ

Fx1 / Fx2 / O6 / O7

▲PageTop

書式

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

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      #sample1:before{
        content : "直前にテキストが挿入されます";
        background-color : #cccccc;
      }
      #sample2:before{
        content : url(../../../../images/development/htmlcss/image.gif);
        background-color : #cccccc;
      }
    </style>
  </head>
  <body>
    <div id="sample1">beforeサンプル1</div>
    <div id="sample2">beforeサンプル2</div>
  </body>
</html>

表示結果

beforeサンプル1
beforeサンプル2

▲PageTop

関連項目

CSS

after / content / display

▲PageTop

▲