试试这个：

.border-list {
  border-left: 1px solid;
  margin-left: -14px;
  padding-left: 30px;
}

个字符

说明：

如何对齐左边框以从项目符号下方开始？

**回答：**这可能是一种很笨拙的方法，但我添加了margin-left: -14px;，将元素向左移动了一点（向后移动空格）

如何删除最左边的边框？

**答：**我只是没有设置父列表的样式，因此它没有边框样式。
**注意：**我添加padding-left: 30px;是为了设计样式。

您可以在每个嵌套的ul上创建一个pseudo-元素，以在每个ul之间创建一个新行。
如果你不想在最后一个ul上有一行，可以使用这个选择器：

.main > li:not(:last-of-type) > ul::before {}

字符串

.main > li > ul {
  position: relative;
}

.main > li:not(:last-of-type) > ul::before {
  content: '';
  width: 1px;
  /* height of the line / spacing between line + dots */
  height: 85%;
  display: block;
  background-color: black;
  position: absolute;
  /* align with dots */
  left: -11px;
  /* use these two properties to always center it vertically */
  top: 50%;
  transform: translateY(-50%);
}

<ul class="main">
  <li>list item
    <ul>
      <li>list item</li>
      <li>list item 2</li>
    </ul>
  </li>
  <li>second list
    <ul>
      <li>list item</li>
    </ul>
  </li>
    <li>third list
    <ul>
      <li>list item</li>
      <li>list item</li>
      <li>list item</li>
      <li>list item</li>
      <li>list item</li>
    </ul>
  </li>
      <li>fourth list
    <ul>
      <li>list item</li>
      <li>list item</li>
      <li>list item</li>
    </ul>
  </li>
</ul>

的数据
如果您想要在最后一个ul上显示一行，请使用此选择器：

.main > li > ul::before{}

型

.main > li > ul {
  position: relative;
}

.main > li > ul::before {
  content: '';
  width: 1px;
  /* height of the line / spacing between line + dots */
  height: 85%;
  display: block;
  background-color: black;
  position: absolute;
  /* align with dots */
  left: -11px;
  /* use these two properties to always center it vertically */
  top: 50%;
  transform: translateY(-50%);
}

<ul class="main">
  <li>list item
    <ul>
      <li>list item</li>
      <li>list item 2</li>
    </ul>
  </li>
  <li>second list
    <ul>
      <li>list item</li>
    </ul>
  </li>
    <li>third list
    <ul>
      <li>list item</li>
      <li>list item</li>
      <li>list item</li>
      <li>list item</li>
      <li>list item</li>
    </ul>
  </li>
      <li>fourth list
    <ul>
      <li>list item</li>
      <li>list item</li>
      <li>list item</li>
    </ul>
  </li>
</ul>

的字符串

你可以通过使用一些伪元素来获得类似的效果。

.line-list, .line-list > li {
  position: relative;
}

.line-list {
  padding-left: .7em;
}

.line-list > li::marker {
  z-index: 1;
}

.line-list::before, .line-list > li::before, .line-list > li::after {
  content: "";
  position: absolute;
}

.line-list::before {
  top: 0;
  bottom: 0;
  left: .05em;
  border-left: 1px solid #000;
}

.line-list > li::before {
  width: 1em;
  height: 1.25em;
  background-color: white;
  position: absolute;
  left: -1em;
  z-index: 0;
  top: 0em;
}

.line-list > li::after {
  top: .5em;
  width: .3em;
  height: .3em;
  border-radius: 50rem;
  background-color: black;
  position: absolute;
  left: -.75em;
  z-index: 1;
}

个字符

有一个属性list-style-position: inside，它可以在ul的内容框中移动项目符号：

ul ul {
  border-left: 1px solid black;
}

.inside {
  list-style-position: inside;
}

.outside {
  list-style-position: outside;
}

个字符