JSFiddle - React, Tailwind, and code Playground

by Sree K

HTML

<body style="height:200vh">
<div style="position:fixed;bottom:0;left:0;">
<div>
<div id="test">
<span>something</span>
  <ul>
    <li><a href="#">Item 1</a></li><li><a href="#">Item 2</a></li><li><a href="#">Item 3</a></li><li><a href="#">Item 4</a></li><li><a href="#">Item 5</a></li><li><a href="#">Item 6</a></li><li><a href="#">Item 7</a></li><li><a href="#">Item 8</a></li><li><a href="#">Item 9</a></li><li><a href="#">Item 10</a></li><li><a href="#">Item 11</a></li><li><a href="#">Item 12</a></li><li><a href="#">Item 13</a></li><li><a href="#">Item 14</a></li><li><a href="#">Item 15</a></li><li><a href="#">Item 16</a></li><li><a href="#">Item 17</a></li><li><a href="#">Item 18</a></li><li><a href="#">Item 19</a></li><li><a href="#">Item 20</a></li>
  </ul>
</div>
</div>
</div>

<p>(Content)</p>
</body>

CSS

ul {
  display: inline;
  margin: 0;
  padding: 0;
}
li {
  display: inline;
  /* white-space: nowrap should be moved to child A because IE fails to wrap resulting list completely */
}
li::before {
  content: ' ';
  /*
  this content is important only for Crome in case the HTML will be minified with no whitespaces between </li><li>
  */
}
li::after {
  content: ' ';
  white-space: normal;
  word-spacing: 1em; /* = nav@padding-right - this actually makes width */
  background-image: radial-gradient(circle, black, black 7%, transparent 15%, transparent 35%, black 45%, black 48%, transparent 55%);
  background-size: 1em 1em;
  background-repeat: no-repeat;
  background-position: center center;
  opacity: 0.5;
}
/*
no need to unset content of li:last-child, because it will be the trailing whitespace so it will collapse
*/
a {
  white-space: nowrap; /* here */
  display: inline-block; /* to allow padding */
  padding: 1em;
  text-decoration: none;
  color: black;
  transition-property: background-color;
  transition-duration: 500ms;
}
a:hover {
  background-color: #ccc;
}