Как создать такой адаптивный элемент?

Question

[Филип]

Не могу сообразить, как создать такой элемент, но чтобы расстояние между точками всегда адаптировалось под размеры экрана.


Мой код.

<ul class="line-list">
    <li class="line-list__item">&nbsp;</li>     
    <li class="line-list__item">&nbsp;</li>     
</ul>

.line-list {    
    display: flex;
    justify-content: space-between;

    &__item {
        position: relative;

        display: inline-block;
        width: 15px;
        height: 15px;

        border: 2px solid #00bfa5;
        border-radius: 50%;
        background-color: #fafafa;
        z-index: 10;

        &:after {
            content: '';

            position: absolute;
            top: 45%;
            left: 100%;

            display: block;
            width: 100px;
            height: 2px;

            background-color: #00bfa5;
            z-index: -1;
        }

        &:last-child:after { content: none; }   
    }
}

Answer 1

[Дмитрий]

https://jsfiddle.net/9x9ceu6s/

Comments

[dicem]

чистая работа, даже добавить нечего

[Филип]

Согласен. А если еще одну точку нужно добавить, например посредине, то этот вариант уже не подойдет, я так понимаю?

[Дмитрий]

Филип: можно внутри добавить новый блок и позиционировать этот блок

Answer 2

[Андрей Федоров]

Предлагаю такой вариант https://codepen.io/aliencash/pen/JyGKJW?editors=1100
Или такой https://codepen.io/aliencash/pen/NvxrgJ?editors=1100 , но тогда круги не могут быть прозрачными