如何用CSS为除最后两个外的ul>li元素添加逗号分隔符

你写的CSS逻辑搞反了——你现在是给倒数第二个li加逗号，但需求是不给倒数第二个（显示的最后一个元素）以及最后一个隐藏的元素加逗号，给前面所有li加逗号。

试试下面的代码：

/* 给所有li元素后面添加逗号 */
ul li::after {
  content: ",";
}

/* 移除倒数第二个li的逗号（它是显示的最后一个元素） */
ul li:nth-last-child(2)::after {
  content: "";
}

/* 如果最后一个li是用visibility:hidden/opacity:0这类方式隐藏的，加上这个确保它的逗号不显示 */
/* 要是用display:none隐藏，这行可以省略，因为元素本身会完全隐藏，逗号也跟着看不到 */
ul li:last-child::after {
  content: "";
}

额外说明 #

如果你的最后一个li是通过display:none隐藏的，那它的逗号会跟着元素一起被隐藏，不需要额外处理；但如果是用visibility:hidden或opacity:0这类保留元素占位的隐藏方式，就需要加上最后一行代码，避免隐藏元素的逗号出现在页面上。

内容的提问来源于stack exchange，提问作者Altaf Malik