<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: "";
}