Check out the code snippet below:
HTML Code
<ul class="menu">
<li><a href="#">Item 1</a></li>
<li>
<a href="#">Item 2</a>
</li>
<li>
<a href="#">Item 3</a>
</li>
<li><a href="#">Item 4</a></li>
</ul>
CSS Style
ul.menu
{
display: flex;
list-style: none;
}
ul.menu li::before
{
content: "\2022";
}
Currently, Items 1 and 4 are displaying properly but there is an extra space before items 2 and 3 (right after the bullet). The issue seems to be related to the new line in the HTML for these items. Interestingly, removing the ul.menu li::before rule resolves this spacing problem.
I believe there might be a simple solution that can eliminate this extra space while preserving the formatting of new lines in HTML. Any suggestions or ideas on how to achieve this would be greatly appreciated? I'm looking for a neat solution rather than simply using ul.menu li a::before which unfortunately makes the bullets clickable as well.
Check out JSfiddle for reference
P.S.: Even without the display: flex; property, the same issue persists proving that it's not directly related to flexbox.