CSS steps-counter
              .steps {
    --bullet-block-margin: 0.375rem;
    --bullet-inline-margin: 0.5rem;
    --bullet-size: 1.75rem;
    --guide-width: 1px;
    list-style: none; /* Do not automatically display the bullets (and then let us to customize them) */

    li {
        counter-increment: steps-counter; /* Make a count and on the rendering of the element, do a "+1" */
        position: relative;

        &::before {
            background-color: #24272f;
            border-radius: 99rem;
            box-shadow: inset 0 0 0 1px #353841;
            color: white;
            content: counter(steps-counter);
            height: var(--bullet-size);
            inset-inline-start: calc((var(--bullet-size) * -1) - var(--bullet-inline-margin));
            line-height: var(--bullet-size);
            position: absolute;
            text-align: center;
            top: 0;
            width: var(--bullet-size);
        }

        &::after {
            background-color: #353841;
            bottom: var(--bullet-block-margin);
            content: '';
            inset-inline-start: calc((-1 * var(--bullet-size)) + var(--guide-width) + (var(--bullet-inline-margin) / 2));
            position: absolute;
            top: calc(var(--bullet-size) + var(--bullet-block-margin));
            width: var(--guide-width);
        }
    }
}

Example of UX steps with steps-counter

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non pretium dui. Donec porta quam dolor, nec bibendum diam pharetra nec. In finibus, dui quis tincidunt ultricies, urna dolor sollicitudin turpis, quis lacinia elit augue non nibh. Morbi mollis consequat dolor, at aliquet est euismod a. Integer tellus diam, blandit sit amet purus ut, blandit malesuada sem. Nulla ac ultrices arcu, nec convallis mi. Sed aliquam blandit consequat.

  2. Proin semper vel urna id venenatis. Nunc velit arcu, rutrum sed augue eget, posuere bibendum dui. Phasellus at leo mattis, ultricies enim sed, auctor erat. Quisque vel est tempor, dignissim turpis at, luctus sapien. Curabitur congue tortor sit amet augue rhoncus, eu mollis massa semper. Phasellus vitae convallis libero. Nullam vitae sem leo. Morbi commodo tincidunt hendrerit. Aenean nec blandit magna. Vestibulum sit amet felis maximus, semper dui at, vulputate nulla. Fusce dignissim eros in arcu molestie venenatis. Sed dolor justo, rutrum ac nulla sed, dictum interdum sapien. Maecenas molestie ipsum sit amet nisl semper gravida. Proin vitae nisl leo. In hac habitasse platea dictumst.

  3. Pellentesque bibendum nibh ac dapibus sagittis. Donec convallis aliquet tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Cras ut sapien lobortis, maximus leo eu, sodales ante. Proin ullamcorper, lorem in mollis viverra, augue urna ullamcorper tortor, nec rutrum lorem sapien dapibus ex. Fusce ultricies ipsum consequat vulputate sollicitudin. Nunc bibendum placerat molestie.

  4. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi enim dolor, egestas in tortor eu, aliquam vestibulum lectus. Morbi imperdiet dolor aliquet accumsan maximus. Proin faucibus facilisis mi, in pellentesque mi egestas ut. Curabitur dapibus ullamcorper egestas. Proin non diam interdum, convallis nisl in, finibus ex. Proin scelerisque metus non augue convallis tincidunt. Vivamus mauris massa, hendrerit vehicula suscipit sit amet, malesuada sed neque.