title: Escalating height of list items
body: <p>I am making a scale using list items, and I want the height of each item to big bigger than the previous one.</p>
  
  <p>Other than adding a class to each, I can't work a way of doing it. I've made a fiddle showing the kind of result that I want: <a href="https://jsfiddle.net/bLj6eLe7/" rel="nofollow">https://jsfiddle.net/bLj6eLe7/</a></p>
  
  <p>The code below is effectively what I want the results to be. Preferably using css but happy to go with JS if needed.</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li style="height: 10px;"&gt;1&lt;/li&gt;
      &lt;li style="height: 20px;"&gt;2&lt;/li&gt;
      &lt;li style="height: 30px;"&gt;3&lt;/li&gt;
      &lt;li style="height: 40px;"&gt;4&lt;/li&gt;
      &lt;li style="height: 50px;"&gt;5&lt;/li&gt;
      &lt;li style="height: 60px;"&gt;6&lt;/li&gt;
      &lt;li style="height: 70px;"&gt;7&lt;/li&gt;
      &lt;li style="height: 80px;"&gt;8&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>