CSS styling for horizontal list with bullet only between elements

Question

I\'m not sure how to build a horizontal list that looks like this:

Answer 1

user2511031's solution is almost ideal... it's just not a valid HTML. There should not be any SPAN outside LI, inside UL.

But it doesn't mean that there is no really ideal solution. I found one!

No need to put the spans allover and clean white-spaces in the markup. Place the needed space into the ":after" pseudo element content, apply the background image to it.

It does the same!

ul { max-width: 700px; padding: 0; text-align: center; }
ul li { display: inline; white-space: nowrap; }
ul li:after {
    content: " ";
    word-spacing: 2em;
    background-repeat: no-repeat;
    background-position: 50% 60%;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAOElEQVQI113M0Q3AIBRC0aM76P7jmHSmSj/6mibyc4EQkEEWuYtDmU1SXO1d6H7tjgupIl8+P+cD22cff9U1wbsAAAAASUVORK5CYII=);
}

Here's the Fiddle