Inline Lists and List Item Separators

Inline/horizontal lists are especially useful for making simple, responsive navigation menus. Typically, list items in HTML are preceded with a bullet, but using CSS, we can change it so that whatever symbol we want only appears in-between list items.

Basic Demo

HTML

<ul class="inlinelist">
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

CSS

ul.inlinelist {
    display: flex; /*Treats list items like they're items in a flex div*/
    flex-wrap: wrap; /*Causes list items to go to the next line if the viewport isn't wide enough*/
    list-style-type: none; /*Removes bullets*/
    padding-left: 0; /*Removes default list indentation*/
    justify-content: center; /*Optional, aligns our list to the center of the div*/
}

ul.inlinelist li + li::before {
    content: "|"; /*Decoration that goes in-between list items.*/
    margin: auto 0.5em; /*Optional, extra spacing so it looks nicer*/
}

The decoration itself can be almost anything. A unicode character, an emoji, even an image! Just use content: url("file/path/to/image.png");, similarly to how you set up a background image.

Combining It with Pseudo-Classes

If you know what you're doing, you can make a basic list look pretty advanced. Using CSS pseudo-classes, we can select different list items and style them specifically.

Below is a breadcrumbs navigation menu that I styled to look like a computer file manager. If you look into the HTML, you'll see that it's the exact same structure as the other example. Everything is defined in the styling.

HTML

<ul class="breadcrumbs">
    <li>Home</li>
    <li>Blog</li>
    <li>Posts</li>
    <li>Post #1</li>
</ul>

CSS

ul.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    padding-left: 0;
    justify-content: center;
}

ul.breadcrumbs li + li::before {
    content: "\203A\00a0📁";
    margin: 0 0.5em;
}

ul.breadcrumbs li:first-of-type::before {
    content: "📁";
    margin-right: 0.5em;
}

ul.breadcrumbs li:last-of-type:before {
    content: "\203A\00a0📂";
}

This ones a bit more complicated, so let's break it down a bit.

• ul.breadcrumbs is our list. The styling is exactly the same as ul.inlinelist from the previous section. It makes sure our list is displayed horizontally instead of vertically.

• li + li::before is one we've already used before. It selects all list items that come immediately after another list item. This is our "default" styling for most of our list items, since all but the first one come right after another.

  For the content I've used a mixed of CSS entities and regular emojis. "\203A" is the entity code for the separator we're using and "\00a0" is the code for a "no-break space". Sometimes, CSS struggles to render spaces from just typing with your space bar in content correctly, so I'd suggest using CSS entities in situations like these.

• li:first-of-type selects the first list item in the list. Since it's the first element, it doesn't follow another list item and isn't effected by the styling set at the beginning. We have to style it separately. I didn't want it to have the separator symbol, so I only gave it the closed file emoji.

• li:last-of-type selects the last list item in the list. Because it follows another list item, by default it'll inherit the styling we set at the beginning. We can still override that styling if we want to, though. To show that the current page is our "opened file", I put the opened file emoji before it.

There's a lot more you can do. I encourage you to just tinker around and see what comes out of it!