リスト要素間の擬似線ですか？

Question

ようなレイアウトを作成しようと

JS Fiddle

イム：レイアウトは、リスト要素の各々の間の疑似回線を有する

One 

-- 

Two 

-- 

Three 

。私はラインで取得することができますフィドルから

<ul> 
<li>One</li> 
<li>Two</li> 
<li>Three</li> 
<li>Four</li> 

は、単にトラブルリストの要素の間に均等にそれを配置しました。

Answer 1

は、リスト項目（li）からのマージンを削除し、それが擬似要素ブロックレベルのmake、絶対位置を削除し、それにいくつかを与えますマージン。

ここに行く：[fiddle]

ul{ 
 
    list-style-type: none; 
 
} 
 
li{ 
 
    position: relative; 
 
} 
 
li:not(:last-child):after{ 
 
    content:""; 
 
    display: block; 
 
    margin: 3em 0; 
 
    border-bottom: 3px solid blue; 
 
    width: 30px; 
 
}

<ul> 
 
<li>One</li> 
 
<li>Two</li> 
 
<li>Three</li> 
 
<li>Four</li> 
 
</ul>

EDIT：この回答へのコメントにドリュー・ケネディの助言として、私はそれを編集し、それがOPの要件に、より完璧に見せていました。

Answer 2

左と下のプロパティにfiddle

li:after { 
    content: ""; 
    border-bottom: 3px solid blue; 
    position: absolute; 
    width: 30px; 
    bottom: -25px; 
    left: 0px; 
} 

Answer 3

https://jsfiddle.net/h6ffn6L0/

ul{ 
    list-style-type: none; 
} 
li{ 
padding-bottom:30px; 
position: relative; 
} 
li:after{ 
    content:""; 
    border-bottom: 3px solid blue; 
    position: absolute; 
    top: -15px; /* your top padding */ 
    left: 0; 
    width: 30px; 
} 

Answer 4

を追加あなたは彼らにあなたのliに対して配置するあなたの擬似要素にleftとbottomプロパティを追加する必要があります。

これはあなたを助ける必要があります。

ul { 
 
    list-style-type: none; 
 
} 
 

 
li { 
 
    margin: 3em 0; 
 
    position: relative; 
 
} 
 

 
li:after { 
 
    content: ""; 
 
    border-bottom: 3px solid blue; 
 
    position: absolute; 
 
    width: 30px; 
 
    bottom: -20px; 
 
    left: 0; 
 
}

<ul> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
</ul>

Answer 5

なぜ国境にli:afterを使用していますか？ ちょうどli要素にボーダーを追加します。

li { 
    border-bottom: 3px solid blue; 
} 

あなたは国境間のスペースにパディングおよび/またはマージンを使用することができます。

Answer 6

li：afterを表示：ブロックに設定すると、余白を変更してリストアイテムから特定の距離に配置することができます。

ul{ 
 
    list-style-type: none; 
 
} 
 
li{ 
 
    position: relative; 
 
    margin-top:50px; 
 
} 
 
li:after{ 
 
    content:""; 
 
    margin-top: 25px; 
 
    border-bottom: 3px solid blue; 
 
    width: 30px; 
 
    display: block; 
 
}

<ul> 
 
<li>One</li> 
 
<li>Two</li> 
 
<li>Three</li> 
 
<li>Four</li> 
 
</ul>

Answer 7

これは、最後に1を追加していない、あなたの要素間のラインを提供します。

ul > li:not(:last-child):after { 
content:""; 
    border-bottom: 3px solid blue; 
    position: absolute; 
    top: -15px; /* your top padding */ 
    left: 0; 
    width: 30px; 
} 

Answer 8

あなたは、リスト項目間の限られた幅のボーダーが必要な場合は、私はあなたが背景画像として、それらを描画するlinear-gradinet()を使用することをお勧めします。

以下

は実施例である：

OPの要件によって判断

ul { 
 
    list-style-type: none; 
 
} 
 
li { 
 
    padding: 1.5em 0; 
 
} 
 
li:not(:last-child) { 
 
    background: linear-gradient(blue, blue) no-repeat; 
 
    background-position: left bottom; 
 
    background-size: 30px 3px; /* First value represents width 
 
           while second represents height of border */ 
 
}

<ul> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
</ul>