如何用非hack式CSS在含display:none的分组列表间添加分隔线

给两类列表项分别添加专属类（比如.group-1和.group-2，确保它们始终按组排列，group-1在前、group-2在后），用结构伪类+伪元素就能实现需求，完全不需要JS或绝对定位：

/* 仅在第二组的第一个项前添加分隔线，且当前面存在第一组项时才显示 */
.group-2:first-of-type:not(:first-child)::before {
  content: '';
  display: block;
  /* 分隔线基础样式 */
  height: 1px;
  background-color: #ddd;
  /* 上下间距，彻底避免贴合列表项的视觉问题 */
  margin: 12px 0;
  /* 可选：添加左右缩进，和列表项内容对齐 */
  margin-left: 0;
}

原理说明 #

1. group-2:first-of-type 选中DOM结构里第一个属于第二组的项，不管前面的group-1项是否被display:none隐藏，都能精准定位到第二组的起始位置。
2. :not(:first-child) 做判断：如果所有group-1项都被隐藏，第一个group-2会变成列表的第一个子元素，此时分隔线自动隐藏；只要前面还有任意group-1项（无论可见与否），分隔线就会显示。
3. 伪元素被设置为块级元素，通过margin控制和上下列表项的间距，完全替代了border贴合内容的方案，分隔线是独立的视觉块。

示例HTML #

<ul class="item-list">
  <li class="group-1">第一组项1</li>
  <li class="group-1" style="display:none">第一组项2（隐藏）</li>
  <li class="group-1">第一组项3</li>
  <li class="group-2">第二组项1</li>
  <li class="group-2">第二组项2</li>
</ul>

你可以根据需求调整分隔线的颜色、高度、margin值，比如换成渐变背景、加粗线条等。该方案兼容IE9及以上所有现代浏览器。

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