Horizontal line in the middle of divs - html

Question

I want to make a line in the middle of the divs. In the following image, the line should be in the middle of the red boxes.
I'm trying to do that using the line height, but not able to.
Here's the code:
HTML/CSS:
.wrap {
text-align: center;
margin: 20px;
}
.links {
padding: 0 10px;
border-top: 1px solid #000;
height: 1px;
line-height: 0.1em;
}
.dot {
width: 20px;
height: 20px;
background: red;
float: left;
margin-right: 150px;
position: relative;
top: -10px;
}
<div class="wrap">
<div class="links">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
Demo:
https://jsfiddle.net/nkq468xg/

Answer 1

You can use Flexbox on links and for line you can use :before pseudo-element on wrap element.
.wrap {
text-align: center;
margin: 20px;
position: relative;
}
.links {
padding: 0 10px;
display: flex;
justify-content: space-between;
position: relative;
}
.wrap:before {
content: '';
position: absolute;
top: 50%;
left: 0;
border-top: 1px solid black;
background: black;
width: 100%;
transform: translateY(-50%);
}
.dot {
width: 20px;
height: 20px;
background: red;
}
<div class="wrap">
<div class="links">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>

Answer 2

Here's one where the line is actually on top, but it does add another element to the HTML:
https://jsfiddle.net/nkq468xg/2/
.wrap {
text-align: center;
margin: 20px;
}
.links {
height: 20px;
position: relative;
}
hr {
border: 0;
height: 1px;
background: black;
position: absolute;
top: 1px;
width: 100%;
}
.dot {
width: 20px;
height: 20px;
background: red;
float: left;
margin-right: 150px;
}
<div class="wrap">
<div class="links">
<hr>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>

Answer 3

You can use pseudo element, like ::after
.links {
padding: 0 10px;
overflow: auto; // Your div will have the height of the overflowing elements
}
.links::after {
content: '';
width: 100%;
height: 1px;
background: black;
display: block;
position: relative;
top: 10px;
}

Answer 4

Check your code snippet in your question here on SO ("Run code snippet" blue button), is that what you need?
Added position: relative; top: -10px; in your code for .dot.
.dot {
position: relative;
top: -10px;
}
Fiddle: https://jsfiddle.net/nkq468xg/3/