は、Liの

Question

の間で、このダッシュ擬似要素を置くためにどのように私はこの赤いダッシュが均等に第一及び第二（と2番目と3番目）このリスト内の「LI」の間に配置することがしたいと思いますが、それは左側にそれの上に表示されません。このようにすることは可能ですか？ここでは例です：

http://codepen.io/anon/pen/ENzXao

これは私が達成しようとしているものです：http://sketchtoy.com/67757539

.main__headers--info ul li { 
    font-size: 20px; 
    list-style: none; 
    display: inline-block; 
    font-weight: bold; 
} 

.main__headers--info ul li:nth-child(2), 
.main__headers--info ul li:nth-child(3) { 
    margin-left: 50px; 
} 

.main__headers--info ul li:nth-child(2)::before { 
    content: ""; 
    display: block; 
    border: 1px solid red; 
    width: 50px; 
} 

<div class="main__headers--info"> 
    <ul> 
    <li>lorem lorem</li> 
    <li>lorem ipsum</li> 
    <li>something</li> 
    </ul> 
</div> 

Answer 1

I余白を除去し、わずかインラインブロック擬似要素を追加します。

.main__headers--info > ul > li { 
 
    font-size: 20px; 
 
    list-style: none; 
 
    display: inline-block; 
 
    font-weight: bold; 
 
} 
 
.main__headers--info > ul > li:not(:first-child)::before { 
 
    content: ""; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    border: 1px solid red; 
 
    width: 50px; 
 
}

<div class="main__headers--info"> 
 
    <ul> 
 
    <li>lorem lorem</li> 
 
    <li>lorem ipsum</li> 
 
    <li>something</li> 
 
    </ul> 
 
</div>

擬似要素の前にスペースがあなたを悩ます場合How to remove the space between inline-block elements?を参照してください。

Answer 2

私はペンを変更しました。私が正しくあなたの質問を得た場合は、ここで

はデモです。

は、2番目と3番目の李さんに、このCSSコードを追加します。要素 Codepen

Answer 3

ここでli要素に

position: absolute; 
    left: 0; 
    width: 100%; 

とposition: relative、実施例の前に、任意のリチウム要素の上に赤い線を配置します最初のものではありません。

.main__headers--info ul li { 
 
    font-size: 20px; 
 
    list-style: none; 
 
    display: inline-block; 
 
    font-weight: bold; 
 
} 
 

 
.main__headers--info ul li:nth-child(2), 
 
.main__headers--info ul li:nth-child(3) { 
 
    margin-left: 50px; 
 
} 
 

 
.main__headers--info ul li:not(:first-of-type)::before { 
 
    content: ""; 
 
    display: block; 
 
    border: 1px solid red; 
 
    width: 50px; 
 
}

<div class="main__headers--info"> 
 
    <ul> 
 
    <li>lorem lorem</li> 
 
    <li>lorem ipsum</li> 
 
    <li>something</li> 
 
    </ul> 
 
</div>

Answer 4

.wrapper { 
 
    display: flex; 
 
    margin: 0 auto; 
 
    padding: 0 30px; 
 
    width: 100%; } 
 

 
.seperator { 
 
    flex-grow: 1; 
 
    flex-shrink: 0; 
 
    margin: 0 1px; 
 
    margin-top: 0 !important; } 
 
    .seperator hr { 
 
    height: 2px; 
 
    background: gray; 
 
    border: none; 
 
    vertical-align: middle; }

<div class="wrapper"> 
 
    <div class=""> 
 
     Text 
 
    </div> 
 

 
    <div class="seperator"><hr></div> 
 

 
    <div class=""> 
 
     Text 
 
    </div> 
 

 
    <div class="seperator"><hr></div> 
 

 
    <div class=""> 
 
     Text 
 
    </div> 
 
</div>