jquery - How to make text of nested lis cascade -

how can make background color spread on line without width:100%

<ul>      <li style="background-color:#33ff33">11          <ul>              <li style="background-color:#cc3333">22                  <ul>                      <li style="background-color:#336633">33 </li>                  </ul>              </li>          </ul>      </li>  </ul>

this i'm trying achieve

you can use css text-indent property making indentation in element text. if don't want use it, can use jquery .wrap() wrapping div around text of li , set margin-left div.

$("li").each(function(i){      $(this).contents().eq(0).wrap("<div/>");      $(this).find("div").css("margin-left", * 40);    });

ul {      padding: 0px;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <ul>      <li style="background-color:#33ff33">11          <ul>              <li style="background-color:#cc3333">22                  <ul>                      <li style="background-color:#336633">33 </li>                  </ul>              </li>          </ul>      </li>  </ul>