在标题中使用特殊格式缩进CSS

Question

我想使用CSS实现以下目标：

到目前为止，我正在使用以下CSS代码将单个元素向右移动：

[title^='10.10'] {
 position: relative;
 left: 10px;
    }

但是我想问你们，如果您知道任何更简单的技巧，也许是通过标题开头的字符样式（如果在CSS中甚至是这样）从同一个层次层批量移动内容。

除此之外，问题还在于元素本身具有不同的ID，这意味着我非常依赖CSS的肮脏解决方法。

HTML代码的一部分-通过开发工具可以看到：

或者JS和JQuery也许可以做到这一点？

预先感谢

Answer 1

我会使用列表，这是一个非常简短的示例，我使用了嵌套列表，您可以更改padding-left元素上的ul来增加或减少缩进。

ul{
  list-style: none;
  padding-left: 20px;
}

<ul>
  <li>one line</li>
  <li>one line</li>
  <li>
    <ul>
      <li>one line</li>
      <li>one line</li>
      <li>one line</li>
      <li>
        <ul>
          <li>one line</li>
          <li>one line</li>
          <li>one line</li>
          <li>one line</li>
         </ul>
      </li>
    </ul>
  </li>
  <li>one line</li>
</ul>