title: Pure CSS collapsible list with icons
body: <p>I am trying to create a self-contained collapsible HTML list in pure CSS. It is currently based on this article: <a href="http://www.thecssninja.com/css/css-tree-menu" rel="nofollow noreferrer">http://www.thecssninja.com/css/css-tree-menu</a>.</p>
  
  <p>I adapted the demo to meet my needs (e.g. collapse/expand only using the +/- buttons). Unfortunately I am not able to get rid of the (unneeded?) <code>&lt;span&gt;</code> elements because it messes up the label positions.</p>
  
  <p>Here is the code I am currently using:</p>
  
  <pre><code>&lt;ul class="tree"&gt;
    &lt;li&gt;&lt;span&gt;Root&lt;/span&gt;&lt;input type="checkbox"/&gt;
      &lt;ul&gt;
        &lt;li class="lib"&gt;&lt;span&gt;Sub1&lt;/span&gt;&lt;input type="checkbox"&gt;&lt;ul&gt;
          &lt;li class="itm"&gt;Item1
          &lt;li class="itm"&gt;Item2
        &lt;/ul&gt;&lt;/li&gt;
        &lt;li&gt;&lt;span&gt;Sub2&lt;/span&gt;&lt;input type="checkbox"&gt;&lt;ul&gt;
          &lt;li class="itm"&gt;Item1&lt;/li&gt;
        &lt;/ul&gt;&lt;/li&gt;
        &lt;li&gt;&lt;span&gt;Sub3&lt;/span&gt;&lt;input type="checkbox"&gt;&lt;ul&gt;
          &lt;li class="itm"&gt;Item1&lt;/li&gt;
        &lt;/ul&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And here comes the full example but without the <code>&lt;span&gt;</code> elements, where the checkboxes are hidden behind the messed up labels:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul.tree {
    padding: 0 0 0 30px
  }
  li {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA1BMVEXDw8PWKQJEAAAAC0lEQVR4XmMgEQAAADAAAYFIpkQAAAAASUVORK5CYII=) 15px 1px no-repeat;
    position: relative;
    margin-left: -15px;
    list-style: none
  }
  li.itm {
    margin-left: -1px !important;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA1BMVEXDw8PWKQJEAAAAC0lEQVR4XmMgEQAAADAAAYFIpkQAAAAASUVORK5CYII=) 0 0 no-repeat;
    padding-left: 21px
  }
  li input {
    position: absolute;
    left: 0;
    margin-left: 0;
    opacity: 0;
    z-index: 2;
    cursor: pointer;
    height: 1em;
    width: 1em;
    top: 0
  }
  li input + ul {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAgMAAACd/+6DAAAACVBMVEX///+AgIAAAAA8XrssAAAAGUlEQVR4XmMIDXVgAMMGCPZagWCDYGioAwCQxAgHBIBVQwAAAABJRU5ErkJggg==) 44px 0 no-repeat;
    margin: -0.938em 0 0 -44px;
    height: 1em
  }
  li input + ul &gt; li {
    display: none;
    margin-left: -14px !important;
    padding-left: 1px
  }
  li span {
    display: block;
    padding-left: 37px
  }
  li input:checked + ul {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAgMAAACd/+6DAAAACVBMVEX///+AgIAAAAA8XrssAAAAFUlEQVR4XmMIDXVgQIZeK1D5oaEOAGzEBgf+DZdOAAAAAElFTkSuQmCC) 44px 5px no-repeat;
    margin: -1.25em 0 0 -44px;
    padding: 1.563em 0 0 80px;
    height: auto
  }
  li input:checked + ul &gt; li {
    display: block;
    margin: 0 0 0.125em
  }
  li input:checked + ul &gt; li:last-child {
    margin: 0 0 0.063em
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="tree"&gt;
    &lt;li&gt;Root
      &lt;input type="checkbox" checked/&gt;
      &lt;ul&gt;
        &lt;li class="lib"&gt;Sub1
          &lt;input type="checkbox" checked/&gt;
          &lt;ul&gt;
            &lt;li class="itm"&gt;Item1
              &lt;li class="itm"&gt;Item2
          &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;Sub2
            &lt;input type="checkbox" checked/&gt;
            &lt;ul&gt;
              &lt;li class="itm"&gt;Item1&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;Sub3
            &lt;input type="checkbox" checked/&gt;
            &lt;ul&gt;
              &lt;li class="itm"&gt;Item1&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><em>Edit:</em> The final result should look like this:</p>
  
  <p><a href="https://i.stack.imgur.com/51FWB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/51FWB.png" alt="Tree structure"></a></p>
  
  <p>I already tried to adjust the CSS myself, but I couldn't get it right without messing up the collapsing functionality and/or the list hierarchy.</p>
  
  <p>What do I need to change in the CSS to correctly layout the list item labels? It this even possible, or do I need some sort of HTML element that is able to position the labels?</p>