Remove whitespace left of li tags in nav breadcrumb

Question

I am trying to create a nav breadcrumb based on Mozilla's nav demo

nav {
    border-bottom: 1px solid black;
}

.crumbs ol {
    list-style-type: none;
    padding-left: 0;
}

.crumb {
    display: inline-block;
}

.crumb a::after {
    display: inline-block;
    color: #000;
    content: '>';
    font-size: 80%;
    font-weight: bold;
    padding: 0 3px;
}

<nav class="crumbs">
    <ol>
        <li class="crumb"><a href="bikes">Bikes</a></li>
        <li class="crumb"><a href="bikes/bmx">BMX</a></li>
        <li class="crumb">Jump Bike 3000</li>
    </ol>
</nav>

I'm trying to remove the inserted "whitespace" that's to the left of the Jump Bike 3000 (on the right side of the >). I can see the issue in both Firefox and Chrome. In Firefox's inspect element, it actually shows this as whitespace in the DOM:

Is there any way to remove this?

score 1 · Answer 1 · answered Sep 23 '20 at 16:58

Removing the literal whitespace between the elements in the markup will do it, but Rayees AC's answer is better.

nav {
    border-bottom: 1px solid black;
}

.crumbs ol {
    list-style-type: none;
    padding-left: 0;
}

.crumb {
    display: inline-block;
}

.crumb a::after {
    display: inline-block;
    color: #000;
    content: '>';
    font-size: 80%;
    font-weight: bold;
    padding: 0 3px;
}

<nav class="crumbs">
    <ol>
        <li class="crumb"><a href="bikes">Bikes</a></li><li class="crumb"><a href="bikes/bmx">BMX</a></li><li class="crumb">Jump Bike 3000</li>
    </ol>
</nav>

score 1 · Accepted Answer · answered Sep 23 '20 at 16:59

remove li inline-block and add display:flex to ol

.crumbs ol {
 display: flex;
 flex-wrap: wrap;
}

nav {
    border-bottom: 1px solid black;
}

.crumbs ol {
    list-style-type: none;
    padding-left: 0;
    display: flex;
    flex-wrap:wrap;
}

.crumb {
    display: inline-block;
}

.crumb a::after {
    display: inline-block;
    color: #000;
    content: '>';
    font-size: 80%;
    font-weight: bold;
    
}

<nav class="crumbs">
    <ol>
        <li class="crumb"><a href="bikes">Bikes</a></li>
        <li class="crumb"><a href="bikes/bmx">BMX</a></li>
        <li class="crumb">Jump Bike 3000</li>
    </ol>
</nav>

Remove whitespace left of li tags in nav breadcrumb

2 Answers2