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; 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 - i.e. 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>