.timeline {
    position: relative;
    --content-offset: 0px;
    --line-size: 2px;
    --blob-size: 12px;
}
  
.timeline-content {
    position: relative;
}

/* The line */
.timeline::after {
    content: "";
    position: absolute;
    top: calc(var(--blob-size) * 0.5);
    left: calc( (var(--blob-size) * 0.5) - (var(--line-size) * 0.5));
    bottom: 0;
    width: var(--line-size);
    background-color: var(--main-lines);
    z-index: 0;
}

/* The stopper */
.timeline::before {
    content: "";
    position: absolute;
    background-color: var(--main-lines);
    bottom: 0;
    left: 0;
    height: var(--line-size);
    width: var(--blob-size);
}

/* The blobs */
.timeline-content::after {
    content: "";
    background-color: white;
    position: absolute;
    top: 0;
    left: 0;
    width: var(--blob-size);
    height: var(--blob-size);

    z-index: 1;

    border-radius: 50%;
    border-width: 2px;
    border-color: var(--main-lines);
    border-style: solid;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}