如何使用 css 创建具有多个点的垂直线？答案

【问题标题】：How to create a vertical line with multiple dots using css?如何使用 css 创建具有多个点的垂直线？
【发布时间】：2022-11-14 23:31:00
【问题描述】：

我正在尝试使用包含多个点的 CSS 创建一条垂直线。但是，我不太确定该怎么做。

谁能帮我解决这个问题？

我想在这里创建类似的东西。

【问题讨论】：

到目前为止，我们需要您的努力 (minimal reproducible example) 作为起点。知道它是否是一条静态线、多色（看起来如此）、可悬停、可选择也很重要。创建“点划线”的方法太多，无法简单地显示一些代码示例。你搜过吗代码笔已经？ “垂直时间线”是一个很好的搜索词......

标签： html css

【解决方案1】：

您可以在这里使用 SVG 图像。

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

【讨论】：

【解决方案2】：

我希望下面的代码能帮助您解决问题。如果您需要更多，您可以使用vertical wizard 进行谷歌搜索并获得额外的代码，如下所示：

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>

【讨论】：