Как сделать так, чтобы высота (длина) нужной линии рассчитывалась автоматически?

Question

[Capitan_S]

Необходимо реализовать пунктирную линию между номерами в кружках.
Как сделать так, чтобы высота (длина) этой линии рассчитывалась автоматически средствами css, html?
В теории вижу это так:
1) Пункты - с относительным позиционированием и отступами вниз.
2) Номера в кружках выполнены как абсолютно позиционированные элементы относительно своего пункта.
3) Как сделать линию - не вижу :)

Можно ли такое реализовать с помощью css и html или только js мне поможет?
Спасибо за Ваше внимание.

Answer 1

[Valery]

https://jsfiddle.net/orLtLar8/42/

Comments

[Capitan_S]

Спасибо большое!

Answer 2

[targrik]

Можно попробовать так:
1. Для контента и левого блока задать display: table-cell, чтобы выровнять их по высоте.
2. Левому блоку задать padding-top размером с диаметр окружности, background-clip: content-box, фоном указать картинку полоски с повторением по оси Y.
3. Окружность с числом спозиционировать абсолютно поверх внутреннего отступа.

Answer 3

[Алексей Уколов]

Без дизайна всей страницы непонятно, но можно попробовать сделать так:
1. Сделать всему родительскому блоку левую пунктирную границу.
2. Номер спозиционировать абсолютно на середине границы.
3. Задать номерам фон, соответствующий основному фону, чтобы граница перекрывалась им.