Как корректно сверстать подобное?

background-image: url(<картинка с точками, можно как data url>);
background-position: top left; 
background-repeat: repeat-y; 
padding-left: <размер фона по Y + отступ до контента>;

position: relative; 
&:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0 - <размер отступа>;
  transform: translate(50%, 50%);
  border: <размер белого пространства сверху / снизу> solid #fff;
  <и здесь либо рисуем элемент через width, height, background-color, border-radius либо картинками, думаю что второе предпочтительнее> 
}

li {
    display: inline-block;
    position: relative;
}
li::before {
    display: inline-block;
    border: 9px double white;
    width: 8px;
    height: 8px;
    background: black;
    border-radius: 40px;
    content: "";
    top: 0;
    left: 0;
}}

li::after{
    display: inline-block;
    border: 1px dotted black;
    width: 0px;
    height: calc(100% - 20px);
    content: "";
    bottom: 0;
    left: 0;
}}