Wie erstelle ich mit CSS eine vertikale Linie mit mehreren Punkten?

Question

Ich versuche, mithilfe von CSS eine vertikale Linie mit mehreren Punkten zu erstellen. Allerdings bin ich mir nicht ganz sicher, wie ich das machen soll.

Kann mir jemand helfen, dieses Problem zu lösen?

So etwas möchte ich hier erstellen.

Answer 1

您可以在此处使用 SVG 图像。

Answer 2

我希望下面的代码能帮助您解决问题。如果您需要更多，您可以使用 垂直向导 进行 Google 搜索并获取如下附加代码：

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