css - 创建具有特定结构的列表项

Question

我正在使用 angular 开发一个应用程序；我的问题是我必须创建一个像上传图片中那样的结构，但我无法弄清楚；

我已经尝试过列表样式和伪类，但是没有成功；

.mod-ul li::before {
    content: "L";
    color: #88c4e6;
    position: relative;
    left: 0;
    top: -4px;
    font-size: 25px;
}

Answer 1

您可以执行以下操作:

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul {
  padding-left: 1em;
}

ul ul li {
  padding-left: 1em;
  border: 1px solid black;
  border-width: 0 0 1px 1px;
}

li.container {
  border-bottom: 0px;
}

li.empty {
  font-style: italic;
  color: silver;
  border-color: silver;
}

li p {
  margin: 0;
  background: white;
  position: relative;
  top: 0.5em;
}

ul ul li ul {
  border-top: 1px solid black;
  margin-left: -1em;
  padding-left: 2em;
}

ul ul li:last-child ul {
  border-left: 1px solid white;
  margin-left: -17px;
}

<ul class="parent">
  <li class="container">
    <p>Testing </p>
    <ul>
      <li>
        <p>Testing 1</p>
      </li>
      <li>
        <p>Testing 2</p>
      </li>
      <li class="container">
        <p>Testing </p>
        <ul>
          <li>
            <p>Testing 1</p>
          </li>
          <li>
            <p>Testing 2</p>
          </li>
          <li>
            <p>Testing 3</p>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="container">
    <p>Testing </p>
    <ul>
      <li>
        <p>Testing 1</p>
      </li>
      <li>
        <p>Testing 2</p>
      </li>
      <li>
        <p>Testing 3</p>
      </li>
    </ul>
  </li>
  <li class="container">
    <p>Testing </p>
    <ul>
      <li class="empty">
        <p>empty</p>
      </li>
    </ul>
  </li>
</ul>