I'm trying to draw lines between circles, i have this code https://codepen.io/cfmorales/pen/VwYmNpY, in some way it works but when you resize the page the height of the line doesnt match to the circle, any ideas of how can i make it responsive? all the magic is in the :before
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;
}
tr>td:first-child:before {
//todo linea extra
content: '';
position: absolute;
background: #BFBFBF;
height: 105%;
width: 1px;
top: 100%;
left: 50%;
transform: translateX(-50%);
}
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;
}<table class="table_1"><tbody><tr><td><span>1</span></td></tr><tr><td><span>2</span></td></tr><tr><td><span>3</span></td></tr><tr><td><span>4</span></td></tr><tr><td><span>5</span></td></tr></tbody></table><p></p>