title: Extra space before list items in a flexbox container
body: <p>I have the following code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ul class="menu"&gt;
    &lt;li&gt;&lt;a href="#"&gt;Item 1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;
      &lt;a href="#"&gt;Item 2&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="#"&gt;Item 3&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Item 4&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>ul.menu
  {
    display: flex;
    list-style: none;
  }
  ul.menu li::before
  {
    content: "\2022";
  }
  </code></pre>
  
  <p>Items 1 and 4 work fine but there is one extra space before items 2 and 3 (right after the bullet). I know that's because there is a new line in HTML for these items. However, everything works fine without the <code>ul.menu li::before</code> rule. </p>
  
  <p>I'm sure I'm missing something obvious. Does anyone have an idea how to get rid of the extra space and still preserve new lines in HTML? Some neat solution maybe, rather than just <code>ul.menu li a::before</code> (this one is not good, it makes the bullets clickable as well).</p>
  
  <p><a href="https://jsfiddle.net/2t85s6k0/" rel="nofollow noreferrer">JSfiddle</a></p>
  
  <p>P.S.: same problem appears even without <code>display: flex;</code> so it's obviously not flexbox-related.</p>