[CSS]単語のカンマ区切りをCSSだけで実現

HTMLでいくつかの単語をカンマ区切りで出したい場合
例えばこんな感じ

りんご,バナナ,イチゴ

プログラムで配列をループで分解して出力するわけですが、曲者なのが最後にカンマがないので、いまだしている部分が最後なのかどうなのかでカンマを出すか出さないかを判定しないといけません。
超めんどくさいですね。

ということでHTMLだけで何とかしようとするとこんな感じ。

.comma span:after {
  content:",";
}
.comma span:last-child:after {
  content:"";
}

commaクラスで指定したブロック内のspanタグが個々の単語ですね。
last-childを指定することで最後のspanはカンマ無指定にしています。

タイトルとURLをコピーしました