如何在元素隐藏但保留文档流时实现正确的div间分隔线？

我希望在div之间显示分隔线，即除第一个可见div外，其余每个可见div的顶部都添加一条线。我编写的CSS在无隐藏元素时效果正常，但当部分div被隐藏后，:not(:first-child)选择器无法实现预期效果。

无法使用display: none隐藏div的原因：

• 元素支持折叠功能
• 元素需保留在文档流中以支持文本搜索

当前代码如下：
CSS：

.item {
  height: 50px;
  text-align: center;
  vertical-align: middle;
  line-height: 50px;
}

.item:not(:first-child) {
  border-top: 1px solid red;
}

.item.hide {
  overflow: hidden;
  height: 0;
}

HTML：

<div class="container">
  <div class="item hide">Item 1</div>
  <div class="item hide">Item 1</div>
  <div class="item ">Item 1</div>
  <div class="item hide">Item 1</div>
  <div class="item hide">Item 1</div>
</div>

请问能否仅用纯CSS解决该问题？

可以用纯CSS解决，核心是用相邻兄弟选择器替代基于DOM结构的:first-child判断，只针对可见元素之间的关系添加边框：

修改后的CSS代码：

.item {
  height: 50px;
  text-align: center;
  vertical-align: middle;
  line-height: 50px;
}

/* 仅给紧跟在可见.item后的可见.item添加顶部边框 */
.item:not(.hide) + .item:not(.hide) {
  border-top: 1px solid red;
}

.item.hide {
  overflow: hidden;
  height: 0;
}

原理说明 #

原来的:not(:first-child)是基于DOM结构的子元素顺序，哪怕第一个子元素是隐藏的，第二个子元素（不管是否可见）都会被选中添加边框，导致第一个可见元素顶部出现多余的线。

而+相邻兄弟选择器只会匹配直接紧跟在可见元素之后的可见元素，这样第一个可见元素的顶部不会有边框，后续所有可见元素的顶部都会自动添加分隔线，完全不受隐藏元素的干扰。

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