How to style a horizontal list with bullets between items using CSS?

For almost all browsers, you can use the CSS3 selector last-child instead of JavaScript:

ul li { display: inline; white-space: pre; }
ul li:after { content: "  \00b7  "; }
ul li:last-child:after { content: ""; }

The white-space: pre stops wrapping within list items (because usually you want it to wrap between list items), and is a hack that allows you to increase the space between list items by adding spaces on the second line.

u00b7 ⋅ (MIDDLE DOT) is the standard unicode character for interpuncts, but you could also use u2022 • (BULLET),   u2b24 ⬤ (BLACK LARGE CIRCLE),   U+2043 ⁃ (HYPHEN BULLET), or any other unicode character you choose.

Note that some characters may not be supported on all systems.


This solution matches all of OP's requirements, except IE8 compatibility (that was 2013).

Simple markup. No JavaScript. No :last-child

Link to CodePen

<ul>
    <li><a>Profile Image</a></li>
    <li><a>Name</a></li>
    <li><a>Activity Information</a></li>
    <li><a>Distance</a></li>
    <li><a>Pace</a></li>
    <li><a>Points Earned</a></li>
</ul>

ul { display:inline-block; padding:0; text-align:center }
li { display:inline }
li a { white-space:nowrap }
li:after { content:" "; letter-spacing:1em; background:center center no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABl0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC4xMkMEa+wAAAAnSURBVBhXY/Dz89MA4sNA/B9Ka4AEYQIwfBgkiCwAxjhVopnppwEApxQqhnyQ+VkAAAAASUVORK5CYII=); }

enter image description here


For those of you who don't have to worry about IE8, this is as simple as:

ul li { list-style: none; display: inline; }
ul li:after { content: " \00b7"; }
ul li:last-child:after { content: none; }

Here is a further improved version. I kept getting an inconsistency at certain page widths where two bullets would be missing rather than just the last one. i.e.

link1 · link2 · link3 link4

link5 · link6

I think the issue was that removing the last bullet separator could itself affect the text flow if the page width was just right. The new script locks the original text flow by adding and removing literal line breaks.

I have the same script to run every time the screen is resized so you don't get stuck with awkward line breaks.

<style>
ul { width: 700px; text-align : center }
ul li { display: inline; white-space: nowrap; }
ul li:after { content: " \00b7"; }
ul li.nobullet:after { content: none; }
</style>

<body onresize="processBullets()" onload="processBullets()">
<ul>
    <li><a href="http://google.com">Harvard Medical School</a></li>
    <li><a href="http://google.com">Harvard College</a></li>
    <li><a href="http://google.com">Harvard Medical School</a></li>
    <li><a href="http://google.com">Harvard College</a></li>
    <li><a href="http://google.com">Harvard Medical School</a></li>
    <li><a href="http://google.com">Harvard College</a></li>
    <li><a href="http://google.com">Harvard Medical School</a></li>
    <li><a href="http://google.com">Harvard College</a></li>
</ul>
<body>

<script>
function processBullets() {
    var lastElement = false;
    $("br").remove(".tempbreak");
    $("ul li").each(function() {
        $(this).removeClass("nobullet");
        if (lastElement && lastElement.offset().top != $(this).offset().top) {
            $(lastElement).addClass("nobullet");
            $(lastElement).append('<br class="tempbreak" />');
        }
        lastElement = $(this);
    }).last().addClass("nobullet");
}

</script>

Tags:

Html

Css

Recent Posts