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 { /* ... */ }