<ul class="__li-compact">
  <li>ListItem</li>
  <li>ListItem</li>
  <li>ListItem</li>
  <li>ListItem</li>
</ul>
<ul class="__li-compact-emsp">
  <li>ListItem</li>
  <li>ListItem</li>
  <li>ListItem</li>
  <li>ListItem</li>
</ul>
<ul class="__li-compact-emsp-double">
  <li>ListItem</li>
  <li>ListItem</li>
  <li>ListItem</li>
  <li>ListItem</li>
</ul>
<ul class="__li-compact-emsp-triple">
  <li>ListItem</li>
  <li>ListItem</li>
  <li>ListItem</li>
  <li>ListItem</li>
</ul>
<ul class="__li-compact-separated">
  <li>ListItem</li>
  <li>ListItem</li>
  <li>ListItem</li>
  <li>ListItem</li>
</ul>
<ul class="__li-compact-separated-spades">
  <li>ListItem</li>
  <li>ListItem</li>
  <li>ListItem</li>
  <li>ListItem</li>
</ul>
<ul class="__li-compact-separated-clubs">
  <li>ListItem</li>
  <li>ListItem</li>
  <li>ListItem</li>
  <li>ListItem</li>
</ul>
<ul class="__li-compact-separated-hearts">
  <li>ListItem</li>
  <li>ListItem</li>
  <li>ListItem</li>
  <li>ListItem</li>
</ul>
<ul class="__li-compact-separated-diams">
  <li>ListItem</li>
  <li>ListItem</li>
  <li>ListItem</li>
  <li>ListItem</li>
</ul>
<ul class="__li-compact-emsp __li-compact-separated-spades __halign-left">
  <li>ListItem</li>
  <li>ListItem</li>
  <li>ListItem</li>
  <li>ListItem</li>
</ul>
<ul class="__li-compact-emsp __li-compact-separated-clubs __halign-center">
  <li>ListItem</li>
  <li>ListItem</li>
  <li>ListItem</li>
  <li>ListItem</li>
</ul>
<ul class="__li-compact-emsp __li-compact-separated-hearts __halign-right">
  <li>ListItem</li>
  <li>ListItem</li>
  <li>ListItem</li>
  <li>ListItem</li>
</ul>
<ul class="__li-compact-emsp __li-compact-separated-diams __halign-justify">
  <li>ListItem</li>
  <li>ListItem</li>
  <li>ListItem</li>
  <li>ListItem</li>
</ul>
[class*="__li-compact"] {
  padding: 0;
}
[class*="__li-compact"] > li {
  display: inline;
}
[class*="__li-compact"],
[class*="__li-compact"] > li:before {
  word-spacing: 0.167em;
}
[class*="__li-compact"] > li {
  word-spacing: normal;
}
[class*="__li-compact"] > li:before {
  content: "\20";
}
[class*="__li-compact-emsp"],
[class*="__li-compact-emsp"] > li:before {
  word-spacing: 0.67em;
}
.__li-compact-emsp-double,
.__li-compact-emsp-double > li:before {
  word-spacing: 1.67em;
}
.__li-compact-emsp-triple,
.__li-compact-emsp-triple > li:before {
  word-spacing: 2.67em;
}
[class*="__li-compact-separated"] > * + li:before {
  content: "\20\7C\20";
}
.__li-compact-separated-spades > * + li:before {
  content: "\20\2660\20";
}
.__li-compact-separated-clubs > * + li:before {
  content: "\20\2663\20";
}
.__li-compact-separated-hearts > * + li:before {
  content: "\20\2665\20";
}
.__li-compact-separated-diams > * + li:before {
  content: "\20\2666\20";
}
[class*="__li-compact"].__halign-left {
  text-align: left;
}
[class*="__li-compact"].__halign-right {
  text-align: right;
}
[class*="__li-compact"].__halign-center {
  text-align: center;
}
[class*="__li-compact"].__halign-justify {
  text-align: justify;
}
[class*="__li-compact"].__halign-justify:after {
  content: "";
  display: inline-block;
  width: 100%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.