title: Append horizontal rule to each <li>
body: <p>For my <code>&lt;ul&gt;</code> list, I would like to add a <code>&lt;hr&gt;</code> after each element of a list. The Result should render like:</p>
  
  <pre><code>&lt;ul class="mylist"&gt;
      &lt;li&gt;
          moooo!
          &lt;hr width="40%"&gt;
      &lt;/li&gt;
      &lt;li&gt;
          maaaaa!
          &lt;hr width="40%"&gt;
      &lt;/li&gt;
      ...
  &lt;/ul&gt;
  </code></pre>
  
  <p>It is bad style adding <code>&lt;hr&gt;</code> to each <code>&lt;li&gt;</code> so I would like to refractor this using css only. I cannot use:</p>
  
  <pre><code>.mylist &gt; li: after{
      content: "&lt;hr&gt;"
  }
  </code></pre>
  
  <p>as content would escape the characters.</p>
  
  <p>I also do <strong>not</strong> want to use jQuery:</p>
  
  <pre><code>$('.mylist').find('li').append('&lt;hr width="40%"&gt;');
  </code></pre>
  
  <p>So the question is, how could I append <code>&lt;hr width="40%"&gt;</code> to <em>each</em> <code>&lt;li&gt;</code> of a certain list using <strong>css3</strong> ?</p>