html - div之间的垂直线

Question

我想在下图中的绿色 block 之间添加一条垂直线。我正在使用 :after 来做到这一点。但是我不想在最后一个 block 之后显示该行。有什么技巧可以做到吗？

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/