[CSS] リストをカンマで区切る

サイト構築

最後以外にカンマをつける。カンマの後ろに半角スペースも挿入したい。となると下記のようになる。あら、とてもスマートで素敵。
難しくはないんだけど、:not(:last-child) がね。忘れちゃって出てこないんだよね。

// カンマ付き横並びリスト
ul.comma li {
    /// 横並び
    display: inline-block;
    /// 最後以外にカンマ表示、半角の余白を与える
    &:not(:last-child)::after {
        content: ',';
        margin-right: .5em;
    }
}
// カンマ付き横並びリスト
/// 横並び
ul.comma li {
    display: inline-block;
}
/// 最後以外にカンマ表示、半角の余白を与える
ul.comma li:not(:last-child)::after {
    content: ',';
    margin-right: .5em;
}

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