Css: How to connect the 2 dots with a border line

Question

I am trying to connect the 2 dots with a line through css. tried few but not getting it.

https://codepen.io/diasraphael/pen/NWNYgdX

<div class="Rtable Rtable--4cols">
 <div style="order:0;" class="Rtable-cell">
  <span class="dot"></span>
 </div>
 <div style="order:1;" class="Rtable-cell"><div>India</div></div>
 <div style="order:2;" class="Rtable-cell">06.07.1988 - 05:15</div>
 <div style="order:0;" class="Rtable-cell">
  <span class="dot"></span>
 </div>
 <div style="order:1;" class="Rtable-cell"><div>Japan</div></div>
 <div style="order:2;" class="Rtable-cell">06.07.1988 - 05:15</div>
 <div style="order:0;" class="Rtable-cell">
  <span class="dot"></span>
 </div>
 <div style="order:1;" class="Rtable-cell"><div>United states</div></div>
 <div style="order:2;" class="Rtable-cell">06.07.1988 - 05:15</div>
 <div style="order:0;" class="Rtable-cell">
  <span class="dot"></span>
 </div>
 <div style="order:1;" class="Rtable-cell"><div>Israel</div></div>
 <div style="order:2;" class="Rtable-cell">06.07.1988 - 05:15</div>
</div>

trying to achieve the below

Answer 1

I have added a custom span with class line in between them. Position the line so that it goes from the right portion of one dot to left portion of the next one. I have removed overflow: hidden from your Rtable-cell class since this line move outside that div. I have added z-index: 2; position: relative; z-index: 2; position: relative; for the dot class to arrange the line behind the dot .

Whatever the value for the width of line you give, the left must be 50% always, Ths will align the line exacly at the centre. Rest of the width of line will automatically be adjusted my the margin of line.

Hope this works for you.

 $bw: 3px; @mixin Rtable-cell--light { background-color: white; border-color: mix(white,red,80%); } .Rtable { display: flex; flex-wrap: wrap; padding: 0; } .Rtable-cell { box-sizing: border-box; flex-grow: 1; width: 100%; // Default to full width padding: 0.8em 0.2em; // overflow: hidden; // Or flex might break list-style: none; background: fade(green,20%); text-align: center; } .dot { height: 25px; width: 25px; background-color: #bbb; border-radius: 50%; display: inline-block; z-index: 2; position: relative; } /* Table column sizing ================================== */ .Rtable--2cols > .Rtable-cell { width: 50%; } .Rtable--3cols > .Rtable-cell { width: 33.33%; } .Rtable--4cols > .Rtable-cell { width: 25%; } .Rtable--5cols > .Rtable-cell { width: 20%; } .Rtable--6cols > .Rtable-cell { width: 16.6%; } .Rtable--7cols > .Rtable-cell { width: 14.2%; } .Rtable--8cols > .Rtable-cell { width: 12.5%; } .Rtable--9cols > .Rtable-cell { width: 11.1%; } .Rtable { position: relative; //top: $bw; left: $bw; //compensate for border offset } .Rtable-cell { @include Rtable-cell--light; } .line { width: 70%; height: 2px; display: block; position: relative; background: blue; top: -16px; left: 50%; margin: 0 auto; }

 <div class="Rtable Rtable--4cols"> <div style="order:0;" class="Rtable-cell"> <span class="dot"></span> <span class="line"></span> </div> <div style="order:1;" class="Rtable-cell"><div>India</div></div> <div style="order:2;" class="Rtable-cell">06.07.1988 - 05:15</div> <div style="order:0;" class="Rtable-cell"> <span class="dot"></span> <span class="line"></span> </div> <div style="order:1;" class="Rtable-cell"><div>Japan</div></div> <div style="order:2;" class="Rtable-cell">06.07.1988 - 05:15</div> <div style="order:0;" class="Rtable-cell"> <span class="dot"></span> <span class="line"></span> </div> <div style="order:1;" class="Rtable-cell"><div>United states</div></div> <div style="order:2;" class="Rtable-cell">06.07.1988 - 05:15</div> <div style="order:0;" class="Rtable-cell"> <span class="dot"></span> </div> <div style="order:1;" class="Rtable-cell"><div>Israel</div></div> <div style="order:2;" class="Rtable-cell">06.07.1988 - 05:15</div> </div>

Answer 2

If you want a continuous line, you can use a linear gradient to create a line as a background on the Rtable-cell div.

div.Rtable-cell:nth-child(3n+1){
   background: linear-gradient(to bottom, white 46%, red 46% 49%, white 49%);
  /* or for a thicker line: */
   background: linear-gradient(to bottom, white 40%, red 40% 50%, white 50%);
}

nth-child(3n+1) will select every 4th child starting with the first - ie all the order:0 divs.

UPDATE: To add space between the dots and the line, you can add a border to the dot:

.dot { border: 10px solid white; /* REST OF your CSS */ }

(FYI, your .dot is an inline-block so there's is extra space below it, so its not perfectly centred vertically in the Rtable-cell . I put the line slightly higher than centre to makes it appear centred.)

Working Example:

 .Rtable { display: flex; flex-wrap: wrap; padding: 0; } .Rtable-cell { box-sizing: border-box; flex-grow: 1; width: 100%; padding: 0.8em 0.2em; overflow: hidden; list-style: none; background: fade(green,20%); text-align: center; } .dot { height: 25px; width: 25px; background-color: #bbb; border-radius: 50%; border: 10px solid white; display: inline-block; } /* Table column sizing ================================== */ .Rtable--2cols > .Rtable-cell { width: 50%; } .Rtable--3cols > .Rtable-cell { width: 33.33%; } .Rtable--4cols > .Rtable-cell { width: 25%; } .Rtable--5cols > .Rtable-cell { width: 20%; } .Rtable--6cols > .Rtable-cell { width: 16.6%; } .Rtable--7cols > .Rtable-cell { width: 14.2%; } .Rtable--8cols > .Rtable-cell { width: 12.5%; } .Rtable--9cols > .Rtable-cell { width: 11.1%; } .Rtable { position: relative; //top: $bw; left: $bw; //compensate for border offset } .Rtable-cell { @include Rtable-cell--light; } div.Rtable-cell:nth-child(3n+1){ background: linear-gradient(to bottom, white 46%, red 46% 49%, white 49%); }

 <div class="Rtable Rtable--4cols"> <div style="order:0;" class="Rtable-cell"> <span class="dot"></span> </div> <div style="order:1;" class="Rtable-cell"><div>India</div></div> <div style="order:2;" class="Rtable-cell">06.07.1988 - 05:15</div> <div style="order:0;" class="Rtable-cell"> <span class="dot"></span> </div> <div style="order:1;" class="Rtable-cell"><div>Japan</div></div> <div style="order:2;" class="Rtable-cell">06.07.1988 - 05:15</div> <div style="order:0;" class="Rtable-cell"> <span class="dot"></span> </div> <div style="order:1;" class="Rtable-cell"><div>United states</div></div> <div style="order:2;" class="Rtable-cell">06.07.1988 - 05:15</div> <div style="order:0;" class="Rtable-cell"> <span class="dot"></span> </div> <div style="order:1;" class="Rtable-cell"><div>Israel</div></div> <div style="order:2;" class="Rtable-cell">06.07.1988 - 05:15</div> </div>

Answer 3

Something like this?

 *, ::after, ::before { box-sizing: border-box; } .dot { width: 40px; height: 40px; background-color: red; border-radius: 100em; box-shadow: 0 0 0 16px #fff; } .d { display: flex; justify-content: space-evenly; margin-top: 80px; border-top: 2px solid red; } .d .dot { position: relative; top: calc(((40px / 2) + (2px / 2)) * -1); }

 <div class="d"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div>