Html div之间的垂直线

我想在下图中的绿色块之间添加一条垂直线。我正在使用

：after

来执行此操作。但是，我不希望在最后一个块之后显示该行。有什么诀窍吗

CSS:

.block{
    width: 20px;
    height: 20px;
    margin-right: 20px;
    background: green;
    float: left;
}

.block:after {
  content: '';
  width: 0;
  height: 100%;
  position: absolute;
  border: 1px solid black;
  top: 0;
  left: 10px;
}

演示：

---

注意：列表项的高度各不相同。如果需要，可以更改HTML标记。

将

：not

选择器与

：last child

选择器一起使用。像这样：

.block:not(:last-child):after { /* ... */ }

---

将

position:relative

添加到

li

元素中，使每一行不覆盖整个

ul

然后添加

li:last child.block{position:relative；overflow:hidden；}

来处理最后一个元素

---

演示在

这里有一个答案可以帮助你：[stackoverflow][1][1]：@user1355300:我更新了你自己的JSFIDLE-为了获得行尾部分的效果，你还可以添加一个定义高度为17px的

li:last child.block:after

；