Draw Lines Between Circles Css

I'm trying to draw lines between circles, i have this code https://codepen.io/cfmorales/pen/qBEqGpr, in some way it works but when you resize the page the height of the line doesnt

Solution 1:

Better u can use SVG, check the below link

    <svg>
  <line
x1="50"
y1="100"
x2="500"
y2="100"
style="stroke:rgb(0, 0, 0);stroke-width:2.5"
/><svg>

Solution 2:

update:

td:nth-child(2) {
            vertical-align: baseline;
          }

          td:nth-child(1) {
            display: flex;
            justify-content: center;
            margin-right: 28px;
            width: 42px;
            height: 42px;
            border: 1px solid #999999;
            border-radius: 100%;
            text-align: center;
            margin-bottom: 31%;
            position: relative;
            background: #fff;
          }
          tr > td:first-child:before { 
  
        
          }
          tr:last-child > td:first-child:before {
            display: none;
     
          }

          span {
            vertical-align: middle;
            color: #999999;
            font-family: "Playfair Display";
            font-size: 24px;
            line-height: 32px;
            text-align: center;
          }
.cc{
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
}
.cc:after{
content: '';
position: absolute;
background:
#BFBFBF;
height: 100%;
width: 1px;
top: 3px;
left: -55px;
transform: translateX(-50%);
display: block;
z-index: -1;
  overflow:hidden;
}
.num{
   position: relative;
  z-index: 100;
  background:#fff;
}

<table class="table_1">
  <tbody>
    <tr>
      <td><span class="num">1</span></td>
      <td><span class="cc">Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal m</span></td>
    </tr>
    <tr>
      <td><span class="num">2</span></td>
      <td><span class="cc">Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal mLorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal m</span></td>
    </tr>
    <tr>
      <td><span class="num">3</span></td>
      <td><span class="cc">Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal m</span></td>
    </tr>
    <tr>
      <td><span class="num">4</span></td>
      <td><span class="cc">Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal m</span></td>
    </tr>
    <tr>
      <td><span class="num">5</span></td>
      <td><span class="">Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal m</span></td>
    </tr>
  </tbody>
</table>
<p></p>

Solution 3:

So I made a few changes to your code and worked on it a bit in my own Codepen. It is a tricky issue with the way you've formatted your markup with a table to have the line only go to the edge of the circle. What I did instead is give the circles a light color and send the line all the way down through all of them, but changed the z-index so it is hidden behind the color of the circles. I also added a wrapper div around the table itself to keep the line from continuing down to the bottom of the screen since I changed the height from 100% to 90vh. Only issue left to solve is getting the line to stop at the last circle instead of continuing on to the bottom of the last bit of text for the last circle. Regardless, it looks quite a bit better now than your original example in my opinion. I'm still working on it but you can check out what I've done so far here: https://codepen.io/stephenirving/pen/Jjobqrb

If you need me to explain any of my changes I would be happy to.

Current CSS code is here:

td:first-child {
    align-items: center;
    background: #add8e6;
    border-radius: 50%;
    border: 1px solid #999;
    display: flex;
    height: 42px;
    justify-content: center;
    margin-right: 28px;
    position: relative;
    text-align: center;
    width: 42px;
}

tr:not(:last-child) > td:first-child:before {
    background: #bfbfbf;
    content: "";
    height: 90vh;
    left: 50%;
    position: absolute;
    top: 100%;
    transform: translateX(-50%);
    width: 1px;
    z-index: -1;
}

td:last-child {
  text-align: justify;
    vertical-align: top;
}

tr:not(:last-child) > td:last-child {
  padding-bottom: 1em;
}

span {
    color: #999;
    font: 1.5rem/1.333 "Playfair Display", sans-serif;
    text-align: center;
    vertical-align: middle;
}

.wrapper--table-list {
  margin-top: 1.5em;
  overflow: hidden;
  width: 95%;
}

Solution 4:

I replaced your table with divs.

I did some CSS magic here.

• The line is just a border-left.

• The circle is a ::before pseudo-element.

• Each ::before element has a counter in it.

• I also used CSS variables so it's easier to update several elements.

• I guessed that you didn't want the last element to have a line, so I used :not(:last-child) to stop that from happening.

:root {
  --circle-size: 42px;
  --spacing: 28px;
  --text-color: #999;
}

.container {
  counter-reset: section;
  padding-top: var(--spacing);
  padding-left: var(--spacing);
}

.container > div {
  position: relative;
  padding: calc(2 * var(--spacing));
  padding-top: 0px;
  
  color: var(--text-color);
  font-family: "Playfair Display";
  font-size: 24px;
  line-height: 32px;
}

.container > div:not(:last-child) {
  border-left: 1px solid;
}

.container > div::before {
  counter-increment: section;
  content: counter(section);
  position: absolute;
  left: 0px;
  top: -4px;

  transform: translateX(-50%);
  
  width: var(--circle-size);
  height: var(--circle-size);
  
  display: flex;
  justify-content: center;
  align-items: center;

  border: 1px solid var(--text-color);
  border-radius: 50%;
  background-color: white;
}

<div class="container">
  <div>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal m</div>
  <div>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal mLorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal m</div>
  <div>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal m</div>
  <div>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal m</div>
  <div>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal m</div>
</div>