Horizontal line in the middle of divs

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>