<!--
    Demo for this article:
    http://blustemy.io/styling-inline-lists-in-css/
-->

<ul class="list-inline">
    <li>
        <a href="#">lorem</a>
    </li>
    <li>
        <a href="#">ipsum</a>
    </li>
    <li>
        <a href="#">dolor</a>
    </li>
</ul>

<ul class="list-inline list-comma">
    <li>
        <a href="#">lorem</a>
    </li>
    <li>
        <a href="#">ipsum</a>
    </li>
    <li>
        <a href="#">dolor</a>
    </li>
    <li>
        <a href="#">sit</a>
    </li>
    <li>
        <a href="#">amet</a>
    </li>
</ul>

<ul class="list-inline list-middot">
    <li>
        <a href="#">lorem</a>
    </li>
    <li>
        <a href="#">ipsum</a>
    </li>
    <li>
        <a href="#">dolor</a>
    </li>
    <li>
        <a href="#">sit</a>
    </li>
    <li>
        <a href="#">amet</a>
    </li>
</ul>

<ul class="list-inline list-bull">
    <li>
        <a href="#">lorem</a>
    </li>
    <li>
        <a href="#">ipsum</a>
    </li>
    <li>
        <a href="#">dolor</a>
    </li>
    <li>
        <a href="#">sit</a>
    </li>
    <li>
        <a href="#">amet</a>
    </li>
</ul>

<ul class="list-inline list-pipe">
    <li>
        <a href="#">lorem</a>
    </li>
    <li>
        <a href="#">ipsum</a>
    </li>
    <li>
        <a href="#">dolor</a>
    </li>
    <li>
        <a href="#">sit</a>
    </li>
    <li>
        <a href="#">amet</a>
    </li>
</ul>

<ul class="breadcrumb">
    <li>
        <a href="#">Lorem</a>
    </li>
    <li>
        <a href="#">Ipsum</a>
    </li>
    <li>
        <a href="#">Dolor</a>
    </li>
    <li>
        <a href="#">Sit</a>
    </li>
    <li>
        <span>Amet</span>
    </li>
</ul>
/*
    Demo for this article:
    http://blustemy.io/styling-inline-lists-in-css/
*/

body {
    font-family: "Arial", sans-serif;
}

a {
    color: #1c7cd6;
}

.list-inline {
    list-style: none;
    padding: 0;
}

.list-inline > li {
    display: inline;
}

.list-comma > li:not(:last-child)::after {
    content: ",";
    margin-left: -.3em; /* remove the space before */
}

.list-middot > li:not(:last-child)::after {
    /* https://en.wikipedia.org/wiki/Interpunct */
    content: "·";
}

.list-bull > li:not(:last-child)::after {
    /* https://en.wikipedia.org/wiki/Bullet_(typography) */
    content: "•";
}

.list-pipe > li:not(:last-child)::after {
    content: "|";
    margin: 0 .25em;
}

.breadcrumb {
    list-style: none;
    padding: 0;
}

.breadcrumb > li {
    display: inline;
}

.breadcrumb > li:not(:last-child)::after {
    /* https://en.wikipedia.org/wiki/Bracket */
    content: "›";
    margin: 0 .25em;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.