javascript - 使用 CSS/JS 创建 git 提交图形样式列表

Question

What I have so far

如何使用 HTML、CSS 和 JavaScript 实现如下所示的列表:

我知道我可以为自定义图像使用 list-style-image，所以我可以实现蓝点，我可以创建空的第一个和最后一个元素并将它们也移到左边，我唯一考虑的是如何连接点(从字面上看)。 :)
感谢您的宝贵时间。

Answer 1

我想有几种方法可以做到这一点。这是我的方式，这样做，是为了充分利用 :before和 :after的元素。我添加了另一个 <ul>主内<ul>获取子项。

这只是一个快速设置，但请继续尝试并根据您的需要更改代码。

ul {
  margin-left: 10px;
  list-style-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Small-dark-green-circle.svg/16px-Small-dark-green-circle.svg.png');
}

.outer-list {
  position: relative;
}

.outer-list:after {
  position: absolute;
  height: calc(100% - 45px);
  width: 1px;
  content: '';
  display: block;
  background-color: black;
  left: 25px;
  top: 20px;
}

ul li {
  padding: 5px 0;
}

.inner-list {
  margin-left: 0;
  margin-top: 10px;
  margin-bottom: 5px;
  position: relative;
}

.inner-list:before {
  position: absolute;
  height: 40px;
  width: 1px;
  content: '';
  display: block;
  background-color: black;
  transform: rotate(-45deg);
  left: 4px;
  bottom: 100%;
  margin-bottom: -15px;
}

.inner-list:after {
  position: absolute;
  height: 40px;
  width: 1px;
  content: '';
  display: block;
  background-color: black;
  transform: rotate(45deg);
  left: 5px;
  top: 100%;
  margin-top: -15px;
}

.inner-list li {
  position: relative;
}

.inner-list li:after {
  position: absolute;
  height: 15px;
  width: 1px;
  content: '';
  display: block;
  background-color: black;
  left: -15px;
  top: 20px;
}

.inner-list li:last-child:after {
  display: none;
}

<ul class="outer-list">
  <li>&nbsp;
    <ul class="inner-list">
      <li>Item 1</li>
      <li>Item 1</li>
      <li>Item 1</li>
      <li>Item 1</li>
    </ul>
  </li>
  <li></li>
</ul>