Bagaimana untuk membuat garis menegak dengan berbilang titik menggunakan CSS?

Question

Saya cuba mencipta garis menegak menggunakan CSS dengan berbilang titik. Walau bagaimanapun, saya tidak pasti bagaimana untuk melakukannya.

Bolehkah sesiapa membantu saya menyelesaikan masalah ini?

Saya ingin mencipta sesuatu seperti ini di sini.

Answer 1

Anda boleh menggunakan imej SVG di sini.

Answer 2

Saya harap kod di bawah membantu anda menyelesaikan masalah anda. Jika anda memerlukan lebih banyak lagi, anda boleh melakukan carian Google menggunakan 垂直向导 dan dapatkan kod tambahan seperti ini:

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

  
item 1
  
item 2
  
item 3
  
item 4
  
item 5