Как делается верста этого элемента?

Question

[Дмитрий Самойлов]

Часто встречаю подобный элемент, но не понимаю как он делается, есть ли у него какое то название, чтобы посмотреть примеры? Как сделать это?

Answer 1

[Mors Clamor]

Через псевдоэлементы :before и :after, погуглите timeline

Comments

[Дмитрий Самойлов]

спасибо, именно то, что искал

Answer 2

[Valek-web Zir]

Как вариант можно установить фоновый цвет цифре и задать скругления.
https://codepen.io/valek-web/pen/WNGewyr

HTML:
1

CSS:
p {
font-size: 30px;
width: 40px;
text-align: center;
background-color: green;
padding: 20px;
border-radius: 50%;
}

Comments

[Vadim Rublev]

А линия где?
Вопрос-то про линию, в основном. Кружки с цифрами / пункты ясно как сделать.

Answer 3

[Владислав Черненко]

По цифрам лучшие варианты тут.