<ul></ul>
<ul>
<li>Peter</li>
</ul>
<ul>
<li>Jacob</li>
<li>Alex</li>
</ul>
<ul>
<li>Max</li>
<li>John</li>
<li>Mark</li>
</ul>
<ul>
<li>Alex</li>
<li>Jacob</li>
<li>Mark</li>
<li>Max</li>
</ul>
<ul>
<li>Alex</li>
<li>Sofia</li>
<li>Mark</li>
<li>Max</li>
<li>Alvaro</li>
<li>Lucas</li>
<li>Jill</li>
</ul>
ul, ol {
display: block;
list-style: none;
padding-left: 0;
clear: both;
height: 40px;
line-height: 40px;
counter-reset: people -2;
}
li {
display: inline-block;
float: left;
font-size: 1rem;
counter-increment: people;
}
/* empty list */
ul:empty::before,
ol:empty::before {
content: "No one likes this post.";
}
/* one element only */
li:first-child:last-child::after {
content: " likes this post.";
}
/* separate all names by commas */
li:not(:first-child)::before {
content: ", ";
}
/* the last name (or from the third one) will end the list */
li:nth-child(n + 3)::before,
li:last-child:not(:first-child)::before {
content: "\00a0 and ";
}
/* add message for multiple names */
li:nth-child(n+3)::after,
li:last-child::after {
content: " like this post.";
}
/* from the 4th element forth, they must be hidden */
li:nth-child(n+3):not(:last-child) {
font-size: 0;
}
/* the last element in a list of 4 or more is special */
li:nth-child(n+4):last-child::before {
font-size: 1rem;
content: "\00a0 and " counter(people) " others like this post.";
}
li:nth-child(n+4):last-child {
font-size: 0;
}
li:nth-child(n+4):last-child::after {
content: "";
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.