.timeline { list-style: none; position: relative; z-index: $z-base; &::before { content: " "; position: absolute; display: block; top: 0; left: 1em; bottom: 0; width: 1px; background: $grey-blue; z-index: $z-base - 1; } > li { position: relative; z-index: $z-base; } .timeline-note { padding-left: 2em; margin-top: 3em; transform: translateY(-50%); color: darken($grey-blue, 20%); font-size: $size-7; &:first-child { margin-top: 0; } &::before { content: " "; position: absolute; display: block; width: 10px; height: 10px; border-radius: 10px; left: 1em; top: 50%; transform: translate(-25%, -50%); border: 1px solid $grey-blue; background: $white; } } .timeline-object { margin-bottom: 1em; > .boxed-section { margin-bottom: 0; } } }