CSSで順序なしリストをカンマ区切りで表示する方法

質問

XHTMLの順序なしリストがインラインで表示され、リスト項目がカンマで区切られるように、CSSでスタイルを設定する方法を探しています。

例えば、次のリストは次のようにレンダリングされる必要があります。 apple, orange, banana のように表示されます (リストの最後にコンマがないことに注意してください)。

<ul id="taglist">
  <li>apple</li>
  <li>orange</li>
  <li>banana</li>
</ul>

現在、このリストのスタイル付けに次の CSS を使っています。これはほぼ希望通りになりますが、リストを apple, orange, banana, のように表示されます (バナナの後の末尾のコンマに注意してください)。

#taglist {
  display: inline;
  list-style: none;
}

#taglist li {
  display: inline;
}

#taglist li:after {
  content: ", ";
}

この問題を純粋なCSSで解決する方法はないでしょうか？

どのように解決するのですか？

末尾のカンマを削除するには :last-child のように、擬似クラスを使用します。

#taglist li:last-child:after {
    content: "";
}