How to properly format this heading?

Question

css

If without an adaptive, then I can arrange it. But so that when the screen is reduced, it moves along with the picture, and then it is completely rebuilt on a new line, it does not work.

Answer 1

I would do like before or after to the text block. Or a separate tag with a negative margin at the beginning. The main thing is not to tie it to the picture.

Answer 2

Pseudo-class ::before + counter-reset + position: absolute
counter-reset to avoid manually writing numbers or play with :nth-child()

Answer 3

in order not to resort to negative indent values, I advise you to logically divide them into items and wrap them with one class (for example, class="item"), then use absolute positioning to expose the internal elements as you please. when adaptive, it is easy to change the properties of positions and sizes.