title: Add a pipe separator after items in an unordered list unless that item is the last on a line
body: <p>Is it possible to style this html ...</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;Dogs&lt;/li&gt;
      &lt;li&gt;Cats&lt;/li&gt;
      &lt;li&gt;Lions&lt;/li&gt;
      &lt;li&gt;Tigers&lt;/li&gt;
      &lt;li&gt;Zebras&lt;/li&gt;
      &lt;li&gt;Giraffes&lt;/li&gt;
      &lt;li&gt;Bears&lt;/li&gt;
      &lt;li&gt;Hippopotamuses&lt;/li&gt;
      &lt;li&gt;Antelopes&lt;/li&gt;
      &lt;li&gt;Unicorns&lt;/li&gt;
      &lt;li&gt;Seagulls&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>... like this ...</p>
  
  <p><img src="https://i.stack.imgur.com/NbNFB.png" alt="enter image description here"></p>
  
  <p>... without adding classes to specific list items, or resorting to javascript? And if so how?</p>
  
  <p>The line breaks are not fixed; the list widens to take up additional space, and list items are center aligned.</p>