如何使用CSS创建带有多个点的垂直线？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

如何使用CSS创建带有多个点的垂直线？

P粉001206492 2024-02-21 14:03:51

[CSS3讨论组]

569

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

有人可以帮我解决这个问题吗？

我想在这里创建一个像这样的东西。

P粉001206492

全部回复(2)

P粉3767388752024-02-22 09:50:25 2楼

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

赞 +0

添加回复

P粉1327308392024-02-22 09:04:39 1楼

我希望下面的代码能帮助您解决问题。如果您需要更多，您可以使用 垂直向导 进行 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;
}