Подключение вертикальных линий между элементами CSS, которые являются частью строк таблицы

Я хотел бы связать несколько кругов CSS с вертикальной линией между ними.

Я попытался использовать селектор псевдоэлементов :after следующим образом:

.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;
}

Но я не получаю никакого результата.

Фото для справки о том, что я хотел бы выполнить:

Ответы

Ответ 1

Используйте псевдоэлемент :before следующим образом:

* {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>

Ответ 2

Вам нужно указать вашему элементу :before ширину и высоту, если вы хотите, чтобы ti отображался как строка. Посмотрите на это:

.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>

Ответ 3

как насчет расстояния от круга до второго круга и т.д. Я имею в виду, как вы управляете пространством между этими кругами?