Line with dots

Dots at end and between

HTML

<ul class="bar">
  <li> 1</li>
  <li> 2</li>
  <li> 3</li>
  <li> 4</li>
  <li> 5</li>
</ul>

CSS

.bar {
  list-style: none;
}
.bar >li {
  position: relative;
}
.bar>li:before {
  content: '\25CF';
  margin-right: 5px;
  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: 20%;
}
.bar >li:last-of-type:after {
  top: -20%;
}