Horizontal line in the middle of divs
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> 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>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;
}