How to create such an adaptive element?

Question

css

I can not figure out how to create such an element, but so that the distance between the points always adapts to the screen size.

My code.

<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/

Answer 2

I suggest this option https://codepen.io/aliencash/pen/JyGKJW?editors=1100
Or this https://codepen.io/aliencash/pen/NvxrgJ?editors=1100 , but then the circles cannot be transparent