How to create a vertical line with multiple dots using css?-CodePudding

I'm trying to create a vertical line using CSS that contains multiple dots. However, I'm not quite sure how to do that.

Could anyone help me out with this?

I want to create something just like this one here.

CodePudding user response：

You could just use an SVG image here.

<svg width="100" height="500" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="pattern" x="0" y="0" width="1" height=".2">
      <line x1="10" y1="0" x2="10" y2="100" style="stroke:rgb(255,0,0);stroke-width:3" />
      <circle cx="10" cy="50" r="6" stroke="white" stroke-width="4" fill="red" />
    </pattern>
  </defs>
  
  <rect fill="url(#pattern)" width="100" height="400" />
</svg>

CodePudding user response：

I'm hoping the code below will help you figure things out. If you require more, you can use the vertical wizard to conduct a Google search and obtain additional code like this:

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

ul:before {
  content: "";
  display: inline-block;
  width: 2px;
  background: red;
  position: absolute;
  left: 3px;
  top: 5px;
  height: calc(100% - 10px);
}

ul li {
  position: relative;
  padding-left: 15px;
  margin-bottom: 15px;
}

ul li:before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: red;
  position: absolute;
  left: 0;
  top: 5px;
  border-radius: 10px;
}

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
</ul>

CodePudding user response：

Here is an option using divs. The color is just to take notice of the different blocks.

.container {
    background-color: rgb(173, 173, 216);
    width: 50px;
    height: 400px;
    display: flex;
    justify-content: center;
}
.vl {


    width: 5px;
    height: 400px;
    background-color: red;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    
  }
.rnd {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: yellow;
}

<!DOCTYPE html>
<html>
<head>
   
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

  <div >
    
    <div >
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div>


</body>
</html>