CSS2で定義された:after疑似要素は、contentプロパティとの組み合わせで、指定した要素の後に指定した内容を生成します。
また、:first-letter及び:first-line擬似要素を:beforfe疑似要素と組み合わせる場合は、生成された内容の最初の文字や一行目に適用する事ができます。

対応ブラウザ

• 
• 
• 
• 
• 
• 
• 

:after疑似要素 のサンプル

ul li.new:after {
  content: " NEW!";
  color: red;
  font-size: 85%;
}

<ul>
<li><a href="http://css-happylife.com/">CSS HappyLife</a></li>
<li><a href="http://cssnite.jp/">CSS Nite</a></li>
<li class="new"><a href="http://www.yomotsu.net/">ヨモツネット</a></li>
</ul>

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

• CSS HappyLife
• CSS Nite
• ヨモツネット

IE6, 7以外のブラウザで確認すると、li要素にclass="new"が付いているヨモツネットに「NEW!」と表示されているのが確認できます。

また、この他の使い方として「clearfix」という名の、floatを指定した要素の親要素に対してclearプロパティの指定が出来ない場合に、:after疑似要素を使ってclearプロパティの指定をするテクニックが有ります。

#contentsSample {
  width: 560px;
  margin: 20px;
  background: #ccc;
}

#mainSample {
  float: left;
  width: 370px;
  height: 150px;
  background: #ccf;
}

#subSample {
  float: right;
  width: 180px;
  background: #ffc;
}

<div id="contentsSample">

<p>#contentsSample</p>

<div id="mainSample">
<p>メイン(#mainSample)</p>
</div>
<div id="subSample">
<p>サブ(#subSample)</p>
</div>

</div>

簡単な2カラムですが、下記のブラウザ上の表示を見てもらうと、IE6, 7以外では#contentsSampleに指定した背景色が見えないことから、高さを算出していない事が分かります。（仕様通りの動き）

サンプルのブラウザ上の表示

#contentsSample

メイン(#mainSample)

サブ(#subSample)

このようにclearプロパティの指定をする要素が無い場合などに、:after疑似要素に各種指定をして高さを算出させるのに使うのが「clearfix」です。

#contentsSample:after {
  content: ".";
  display: block;
  visibility: hidden;
  height: 0.1px;
  font-size: 0.1em;
  line-height: 0;
  clear: both;
}

色んな指定がされてますが、コレを実際のブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

#contentsSample

メイン(#mainSample)

サブ(#subSample)

ちゃんと背景色が下まで表示され、下辺の余白も意図した部分で確保されています。