まず，マークアップは次の通り

/* insをインライン要素として */
<p>
  <ins datetime="2007-10-08T10:00:00+09:00" cite="http://...">
    この部分を追記します。追記の日時と追記の理由を示すURIを表示します。
  </ins><br />
  datetime，cite属性の値を利用します。
</p>

/* insをブロックレベル要素として */
<ins datetime="2007-10-08T10:00:00+09:00" cite="http://...">
  この部分を追記します。追記の日時と追記の理由を示すURIを表示します。
</ins>
<p>datetime，cite属性の値を利用します。</p>

疑似要素afterとcontentプロパティで

ins {
  text-decoration: none;
  color: #363;
}

ins:after {
  content: "（" attr(cite) "の指摘により" attr(datetaime) "に追記。）";
}

• cotentプロパティの値はタイプの違うものが混在できる。

ブラウザの対応状況

Firefox2，Opera9，NN7.1などは対応済み。

Safariは対応しているが日本語が文字化けする。

IE5〜7では未対応。

Safariでの文字化け

contentプロパティの値が日本語（多バイト文字）の場合，文字化けします。日本語の部分をバックスラッシュでエスケープすることによって文字化けを防げます。

エスケープの手順

1. 数値文字列参照変換スクリプト で日本語を入力し「16進数のhtml数値文字参照」ボタンをクリックします。
2. 変換された結果から，さらに「&#x」を「\」に替え，「;」を削除します。
3. これをcontentプロパティの値" "の中に書き入れます。

上の例は，次のようになります。

  content: "\ff08" attr(cite) "\306e\6307\6458\306b\3088\308a" attr(datetime) "\306b\4fee\6b63\ff09";