Connect vertical lines between CSS elements that are part of table rows

Question

I would like to link some CSS circles with a vertical line between them.

I tried using the :after pseudo-element selector as follows:

 .circle { height: 45px; width: 45px; border-radius: 50%; border: 2px solid; position: relative; border-color: #889EB7; } .circle:before { content: ""; display: block; position: absolute; z-index: 1; left: 18px; top: 0; bottom: 0; border: 1px dotted; border-width: 0 0 0 1px; } 

But I do not get any result.

Photo for reference on what I would like to perform:

Answer 1

Use the :before pseudo-element as follows:

 * {font-family: 'Segoe UI'; font-size: 10pt;} .circle {position: relative; border: 2px solid #999; border-radius: 100%; width: 50px; line-height: 50px; text-align: center; margin-top: 50px; background-color: #fff; z-index: 2;} .circle:first-child {margin-top: 0;} .circle:before {position: absolute; border: 1px solid #999; width: 0; height: 50px; display: block; content: ''; left: 50%; z-index: 1; top: -54px; margin-left: -1px;} .circle:first-child:before {display: none;} 

 <div class="circle">Step 1</div> <div class="circle">Step 2</div> <div class="circle">Step 3</div> 

Answer 2

You need to tell your element :before width and height if you want ti to display as a string. Look at this:

 .circle { height: 45px; width: 45px; border-radius: 50%; border: 2px solid; position: relative; border-color: #889EB7; } .circle:before { content: ""; display: block; position: absolute; z-index: 1; top: 100%; left: 50%; border: 1px dotted; border-width: 0 0 0 1px; width: 1px; height: 100px; } 

 <div class='circle'></div> 

Answer 3

how about the distance from the circle to the second circle, etc. I mean, how do you manage the space between these circles?