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

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; }

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=); }

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.