垂直线,两端有点

我一直在寻找这方面的解决方案,并在谷歌没有成功.

我想创建一个垂直线,其末端有点,沿线有几个.

img例如:

我怎样才能用css实现这个目标？我可以做一个带间距的虚线,但我也不知道如何创建这条线,如果可能的话？

这是一个可以帮助您解决问题的快速代码段:

.bar {
  list-style: none;
}
.bar >li {
  position: relative;
}
.bar>li:before {
  content: '\25CF';
  margin-right: 10px;
  font-size: 20px;
}
.bar>li:after {
  position: absolute;
  left: 0;
  top: 0;
  content: '';
  border-left: 2px solid black;
  margin-left: 5px;
  height: 100%;
}
.bar >li:first-of-type:after {
  top: 50%;
}
.bar >li:last-of-type:after {
  top: -50%;
}

  
element 1
  
element 2
  
element 3
  
element 4
  
element 5