html - CSSのスレッドライン

Question

私はかなり長い間、動的な高さの線をcssで機能させるようにしています。

異なるTextItemのアイコンを水平に接続する必要があります。

アイテムは動的です。たとえば、クリックすると変化します。の疑似要素で.itemアイテムと同じ高さになるようにしようとしましたが、どういうわけかいつも長すぎます。

コード： http： //jsfiddle.net/BCwwb

.item目標：スレッドラインを最初から最後までスポーンさせます.itemが、それ以上はスポーンさせません。

Answer 1

.item position: relative;その絶対位置がそれに対して相対的に配置されるように与え::beforeます：

.item {
    position: relative;
}

これが更新されたフィドルです。

あなたが最後のものでそれを隠すつもりだったなら...それからそれもしてください:)

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

そして別のjsFiddle。

Answer 2

.itemソリューションを単純化して、すべての要素を親要素にラップしてみませんか。これはアイテムのリストのように見えるので、通常はulまたはolを使用しますが、セマンティクスに興味がない場合は、div（満足しているように見える）を使用してください。

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