A vertical line with dots at the ends and between

Question

I was looking for a solution for this both here and google without success.

I want to create a vertical line with dots at the ends and several along the line.

img for example:

how can i achieve this with css? I can draw a dashed line at intervals, but I have no idea how to create a line, and if possible?

Answer 1

Here is a quick snippet that can 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>

Run codeHide result

, , bullet :before , :after . , .

, , !

Answer 2

<style>
  svg {
    background-color: black;
  }
  .dotted-line {
    fill: none;
    stroke: orange;
    stroke-width: 2;
    marker: url(#circle-marker);
  }
  #circle-marker circle {
    fill: orange;
    stroke; orange;
  }
</style>
<svg height="40" width="190">
  <polyline class="dotted-line" points="20,20 70,20 120,20 170,20"/>
  <marker id="circle-marker" markerWidth="8" markerHeight="8" refX="5" refY="5">
    <circle class="foreground" cx="5" cy="5" r="3" />
  </marker>
</svg>

Hide result

( "" , .)

marker SVG marker-start, marker-end, marker-mid SVG. marker ( , ).