JSFiddle - React, Tailwind, and code Playground

by nerdess

HTML

<h2>ul with column count (using :before)</h2>
<ul id="withColumCountAndBefore">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>
<h2>ul with column count (using :after)</h2>
<ul id="withColumCountAndAfter">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>
<h2>ul with column count (using :after on the a-tag)</h2>
<ul id="withColumCountAndA">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
</ul>

CSS

li {
  list-style-type: none;
}

ul#withColumCountAndBefore,
ul#withColumCountAndAfter,
ul#withColumCountAndA {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
}

#withColumCountAndBefore li:before {
  content: '*';
  width: 0.7em;
  height: 0.7em;
  margin-right: -0.7em;
  display: inline-block;
  position: relative;
  left: -1em;
  background-color: blue;
}

#withColumCountAndAfter li:after {
  content: '*';
  width: 0.7em;
  height: 0.7em;
  margin-right: -0.7em;
  display: inline-block;
  position: relative;
  left: -1em;
  background-color: blue;
}

#withColumCountAndA a:after {
  content: '*';
  width: 0.7em;
  height: 0.7em;
  margin-right: -0.7em;
  display: inline-block;
  position: relative;
  left: -1em;
  background-color: blue;
}