Как сделать линию между кругами css

Чтобы сделать линию между кругами в CSS, можно использовать псевдоэлемент ::before или ::after, а также свойства border и border-radius.

1. Сначала создайте два круга с помощью свойства border-radius:

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #000;
}

2. Добавьте псевдоэлемент ::before для первого круга и задайте ему ширину и цвет:

.circle:before {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background-color: #fff;
  position: absolute;
  top: 24px;
  left: 14px;
}

3. Добавьте ::after для второго круга и задайте ему ширину и цвет:

.circle:after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background-color: #fff;
  position: absolute;
  top: 24px;
  left: 16px;
}

4. Настройте смещение линии с помощью свойств top и left.

В итоге, у вас должна получиться линия, соединяющая два круга:

<div class="circle"></div>
<div class="circle"></div>

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #000;
  position: relative;
  display: inline-block;
  margin-right: 20px;
}

.circle:before,
.circle:after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background-color: #fff;
  position: absolute;
  top: 24px;
}

.circle:before {
  left: 14px;
}

.circle:after {
  left: 16px;
}

Обратите внимание, что для этого примера использовались псевдоэлементы и добавлена позиция position: relative для родительского элемента, чтобы обеспечить корректное позиционирование линии.