Indent in CSS using special format in title

Question

I would like to achieve the following using CSS:

So far I was using following CSS-Code for moving single elements to the right:

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

But I wanted to ask you guys, if you know any easier trick, maybe by the character style in the beginning of the title (if that is even possible in CSS) for bulk moving content from same hierarchical layer.

The problem beyond all of this is, that the elements themselves have varying ID's, which means I am pretty dependant on the dirty workaround with CSS.

A part of the HTML-code - seen with Dev-Tools:

Or is there maybe a way with JS and JQuery to do this?

Thanks in advance

Answer 1

I would have used lists, here is a very short example, I used nested lists, you can change the padding-left on the ul element to increase or decrease the indentation.

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>