html 嵌套 li 样式 - 每行前面的彩色条

Question

我想为我从 Markdown 生成中得到的列表设置样式。生成的html代码是这样的:

ul li {
    list-style-type: none;
    background: white;
    margin: 4px 0;
    padding-top: 4px;
    padding-left: 24px;
    border-left: 12px solid #5EAADF;
    background: #F6F8FA;
}

ul {
    padding-inline-start: 0;
}

<ul>
  <li>Item 1
    <ul>
      <li>Item 1.1
        <ul>
          <li>Item 1.1.1</li>
        </ul>
      </li>
      <li>Item 1.2
        <ul>
          <li>Item 1.2.1
            <ul>
              <li>Item 1.2.1.1</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

我想在每行前面添加一个彩色条。我只是设法设计成这样。但我想要的是:

生成的 html 代码有什么方法可以做到这一点吗？

Answer 1

可以用伪代码来完成。

但是，如果不对 HTML 进行任何更改，我认为您将无法做到完美。如果 <li> 的文字，我会让生活变得更轻松元素将被包装在 <p> 中或 <span>

ul li {
  list-style-type: none;
  background: white;
  margin: 4px 0;
  padding-top: 4px;
  padding-left: 24px;
  background: #F6F8FA;
  position: relative;
  line-height: 20px;
  /* Added */
}

ul li:before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0;
  height: 24px; /* line-height + padding-top */
  width: 12px; /* original border width */
  background-color: #5EAADF;
}

ul {
  padding-inline-start: 0;
  /* 
    Experimental technology, limited browser support
    See: https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-start
  */
}

<ul>
  <li>Item 1
    <ul>
      <li>Item 1.1
        <ul>
          <li>Item 1.1.1</li>
        </ul>
      </li>
      <li>Item 1.2
        <ul>
          <li>Item 1.2.1
            <ul>
              <li>Item 1.2.1.1</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>