3つのdivの間の行css、html

Question

私は何をしているのかわからない。

私は基本的に上記目的を達成しようとしています。私はsectionタグとliタグのリストを持っていて、その行にはhrというタグがあります。彼らはうまく重複して座ったり、私が好きなほどスムーズに見えません。

HTML：

<section class="navigation"> 
    <li class="page_nav--one">One</li> 
    <hr class="page_nav--line_break" /> 
    <li class="page_nav--two">Two</li> 
    <li class="page_nav--three">Three</li> 
</section> 

と私のCSSは次のようになります。

.navigation { 
    background: #fff; 
    text-align: center; 
    margin: 50px 0; 
    display: block; 

    .page_nav--line_break { 
     position: absolute; 
     display: block; 
     height: 1px; 
     top: -14px; 
     border: 0; 
     border-top: 1px solid #ccc; 
     /* margin: 1em 0; */ 
     padding: 0; 
     width: 400px; 
     right: 202px; 
     z-index: 999999; 
    } 

    li { 
     display: inline-block; 
     list-style: none; 
     position: relative; 
     margin: 10px 85px; 
    } 

    li:before { 
     content: ''; 
     height: 16px; 
     width: 16px; 
     background-size: 16px 16px; 
     position: absolute; 
     top: -23px; 
     left: 16px; 
     margin: auto; 
     cursor: pointer; 
     pointer-events: none; 
    } 

    li:nth-child(1):before { 
     background: url("trianle_image.png"); 
    } 

    li:nth-child(2):before { 
     left: 23px; 
     background: url("trianle_image.png"); 
    } 

    li:nth-child(3):before { 
     left: 35px; 
     background: url("trianle_image.png"); 
    } 
} 

私は後だか私は正しい方法それについてつもり何を達成するためのより良い方法/方法はありますか？

Answer 1

おそらく:after疑似要素を使用します。

<div class="diamond"></div> 
<div class="diamond"></div> 
<div class="diamond"></div> 

は、擬似要素とCSSは次のようになります。

.diamond { 
    width:10px; 
    height:10px; 
    position:relative: 
    float:left; 
    margin-right:100px; 
} 
.diamond:last-of-type { 
    margin-right:0; 
} 
.diamond:after { 
    content:"" 
    display:block; 
    width:100px; 
    height:1px; 
    background-color:gray; 
    position:absolute; 
    top:5px; 
    left:5px; 
} 
.diamond:last-of-type:after { 
    display:none; 
} 

だから、理論は（あなたが持っているように）要素の後にあなたのラインがあり、それは間のマージンと同じ幅であるということです2つの要素は、必要な場所に正確に配置されます。最後のものは隠されています。

FIDDLE