Как порекомендуете верстать этот блок?

Question

[Стас]

Мне предстоит верстать макет, в котором для меня есть один загадочный момент.
Вот четыре чекпоинта или как там правильно, связанные одной линией и возле каждой есть текст.
Как так сверстать, чтобы было правильнее всего?
Мне кажется, что лучше всего картинкой все сделать. Текст, чекпоинты и линию. Но почти уверен, что так порядочный верстальщик не стал бы делать.

Comments

[ⓒⓢⓢ]

Если не адаптив, то я бы в свг засунул линии и маркеры (чекпоинты) , а текст позиционировал слоем выше.
Текст нельзя в картинку пихать, особенно в растовую (к линиям это тоже относиться)

upd
у текста +- пиксель не так заметно, как если маркер "оторвётся" от линии

[Ilya]

я такое делал, через псевдоэлементы

Answer 1

[Максим]

Я три раза перекурил и два раза чай налил : https://codepen.io/simkaUser/pen/MEapWP?editors=1100 , это задание не для джуниора

Answer 2

[Даниил Попов]

Я хоть и не опытный верстальщик, но полагаю, что на его месте я бы не искал себе лишней работы. Если не стоит прямой задачи сделать их html+css, то вполне приемлемо сделать в виде картинки (раст или svg) + текст поверх, а главное быстро, просто и понятно. В общем, целесообразность данного действия вызывает вопросы

Comments

[Kirill Petr]

Согласен, реализация без html/css в данной ситуации не критично