<ul id="foo">
  <li>You have cat to be kitten me right meow</li>
  <li>Eat plants, meow, and throw up</li>
  <li>My owner today cough furball into food bowl</li>
  <li>I shredded your linens for you</li>
  <li>Play time carefully drink from water glass</li>
  <li>Jump on human and sleep on her all night long</li>
  <li>Purr in the morning and then give a bite to every human around</li>
  <li>Waking up request food, purr loud scratch the walls</li>
</ul>
.loop(@counter, @display) when (@counter > 0) {
  .loop(@counter - 1, @display);
  li:nth-child(@{counter}) {
    display: @display;
  }
}

ul li {
  display: none;
}
ul {
  //list-style: decimal;
  .loop(4, list-item);
}
View Compiled
setInterval(firstToEnd, 1000);


function firstToEnd() {
  const firstElem = foo.firstElementChild;
    foo.appendChild(firstElem);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.