JSFiddle - React, Tailwind, and code Playground

by web tiki

HTML

<ul>
    <li><a href="http://google.com">Harvard Medical School</a></li><span class='separator'>
    </span><li><a href="http://google.com">Harvard College</a></li><span class='separator'>
    </span><li><a href="http://google.com">Harvard Medical School</a></li><span class='separator'>
    </span><li><a href="http://google.com">Harvard College</a></li><span class='separator'>
    </span><li><a href="http://google.com">Harvard Medical School</a></li><span class='separator'>
    </span><li><a href="http://google.com">Harvard College</a></li><span class='separator'>
    </span><li><a href="http://google.com">Harvard Medical School</a></li><span class='separator'>
    </span><li><a href="http://google.com">Harvard College</a></li>
</ul>

CSS

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