after 擬似要素

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


ブラウザ

Fx1 / Fx2 / O6 / O7

▲PageTop

書式

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

▲PageTop

サンプル

ソースコード

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

表示結果

afterサンプル1
afterサンプル2

▲PageTop

関連項目

CSS

before / content / display

▲PageTop

▲