Vertical line with dots in ends and between

Question

I have been searching for a solution for this both here, and on google with no success.

I want to create a Vertical line which has dots in the ends and a few along the line.

img for example:

how can I achieve this with css ? I can do a dotted line with spacing, but I have no idea how to create the line also, and if that is even possible ?

Answer 1

Here's a quick snippet that might help you with your problem:

.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%;
}

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

The idea is that you use a list and each element's bullet is replaced with a :before symbol of a Unicode black circle, while each :after selector for the elements contains the element's share of the vertical line. The first and last list elements have an extra rule to truncate their border-line, so that it does not go past the black circle.

Tweak it a bit to get the exact effect you want!