How to repeat a CSS codes in one vertical line?

[duy]

Hello,

I need help repeat a CSS circle in the middle of the vertical line.

those circles suppose to be next to titles. I have 4 titles so I need 3 more circles.
How I want it to look like:

HTML:

    <div class="divider">
    </div>

CSS:

.divider {
    position:absolute;
    left:50%;
    top:125%;
    bottom:10%;
    border-left: 3px solid #e2e8e9;
height: 555%;
width: 2%;
}

    .divider::before {
        background: #fff;
        border: 4px solid #9db0b5;
        border-radius: 50%;
        content: "";
        height: 20px;
        left: 50%;
        margin: 1.25em 0 0 -21px;
        position: absolute;
        top: -3px;
        width: 20px;
    }

    .divider::after {
        clear: both;
        content: "";
        display: table;
    }

[PaulOB]

Hi,

I’m just about to go away for a week and in a bit of a rush but remember a similar question to this a while ago and the solution went like this.

I’m sure the code can be massaged to your requirements.

[duy]

Got it, thank you.