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

Question

我想设计一个从降价生成中得到的列表。生成的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代码有什么办法吗？

标签： htmlcsshtml-lists

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>