<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%;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.