html - CSS中的线程

Question

我现在尝试了很长一段时间来获得在 css 中工作的动态高度线。

它应该水平连接不同TextItems的图标。

这些项目是动态的，例如它们甚至会在点击时发生变化。我试图用一个伪元素来做到这一点，.item所以它的高度与项目相同，但由于某种原因它总是太长。

代码：http: //jsfiddle.net/BCwwb

目标：使线程从第一个.item到最后一个产生.item，但不再进一步。

Answer 1

Give.item position: relative;使其绝对定位::before将相对于它定位：

.item {
    position: relative;
}

这是更新的小提琴。

如果您打算将其隐藏在最后一个...那么也这样做:)

.item:last-child::before {
    display: none;
}

还有另一个 jsFiddle。

Answer 2

为什么不简化解决方案并将所有.item元素包装在父元素中。这看起来像一个项目列表，所以我通常使用ulor ol，但如果你不了解语义，只需使用 a div（看起来你很满意）。

http://jsfiddle.net/BCwwb/3/