How to make progress without unnecessary elements?

Question

css

markup

<ul class="steps">
    <li class="steps-item curently">
        <span class="marker">
            <span class="marker-icon marker-icon-one"></span>
            <span class="marker-text">Пункт 1</span>
        </span>
    </li>
    <li class="steps-item future...
</ul>

Image

CSS, LESS, SASS = ???

Answer 1

With a number of assumptions like this jsfiddle.net/petroveg/heks3aws
1. The background of the items is white - it overlaps the dotted line. This line can also be set using :before on the list instead of SVG .
2. For IE9, I did not write a “CSS polyfill” in the form of inline-block, stretching and font size control. Just laziness.
Update: here it is jsfiddle.net/petroveg/heks3aws/1
3. IE will need to convert the background from utf8 to base64 . Didn't either.
Now about the shift of areas and sizes:
- the background of the list is shifted from the top border by 30 pixels, which is half the height of the icons
- exactly the same distance is shifted :beforefor the list element to form an arrow
- for the first and last elements in the link , :after is adjusted horizontally by half the indent of the link