Line between three divs css, html - html

Question

I'm unsure how to tackle what i'm doing.
I'm basically trying to achieve the above. I have a section tag and a list of li tags with a hr tag for the line. They overlap poorly though and don't sit/look as smoothly as i'd like.
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>
and my css looks like :
.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");
}
}
Is there a better method/way of achieving what i'm after or am I going about it the correct way?

Answer 1

I would probably use :after pseudo elements.
<div class="diamond"></div>
<div class="diamond"></div>
<div class="diamond"></div>
then the CSS with pseudo elements looks like this:
.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;
}
So the theory is that the after element is your line (like you have) and it is as wide as the margin between the two elements, placed exactly where you need it. Then the last one is hidden.
FIDDLE