div之间的垂直线

Question

我想在下图中的绿色块之间添加一条垂直线。我正在使用: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;
}

演示： http://jsfiddle.net/rhwb7b2o/

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

Answer 1

将position:relative添加到li元素，这样每行都不会涵盖整个ul。

然后添加li:last-child .block{position:relative;overflow:hidden;}来处理最后一个元素。

http://jsfiddle.net/gaby/qj2dbdkz/

演示

Answer 2

将:not选择器与:last-child选择器一起使用。像这样：

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