css - 跨越多列的列表条目之间的线

Question

我有一个带有简单 CSS 样式的列表，可以在列表元素之间添加水平线，如下所示:

li:not(:last-child) {
  border-bottom: 1px solid black;
}

这很好用，除了现在我想将列表分成两列，我这样做是这样的:

ul {
  column-count: 2;
  column-width: 50%;
}

问题在于左侧列底部的列表项有底部边框，因为 :not(:last-child) 条件当然会看到整个列表作为一个连续的序列，而不是两个单独的序列。

有没有一种方法可以构建 CSS 规则，使其不会应用于多列元素中每列的最后一个元素，或者我可以使用一些解决方法？

就解决方法而言，我当然可以在页面生成期间将我的列表一分为二(即 在我的 PHP 脚本中)，但我特别感兴趣是否有纯 CSS 解决方案。

为了清楚起见，下面是上面的图片:

我想要做的是以通用方式摆脱第四个元素下的行(即不使用 :not(:nth-child(4)) 等).

Answer 1

尚未对此进行测试，但引用了 https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child , 你可以尝试这样的事情:

li:not(:nth-last-child(1)),
li:not(:nth-last-child(2)) {
  border-bottom: 1px solid black;
}