So I just needed to present a list of authors in an article but I didn’t want to resort to writing a stupid text shoving helper.

The sun :sunny: is beating down on me but I need to sit it out since my dark skin needs more exposure to produce my dosages of vitamin D. While devouring my pasta :spaghetti: carbonara I decided to share a little snippet I may need again in the future :wink:.

So for future me…

Semantically you just need a list, aesthetically you just need something that is more natural language-ish. $LaTeX$ has a way of dealing with authors, but we’re writing webpages. It’s just a matter of style.

With my two authors, one quite wise and renowned for his disregard for the ordering we generally respect in English grammar and the other barely capable of formulating a proper sentence, we are in for a treat.

<ul class="authors">
  <li class="author">Yoda</li>
  <li class="author">Jar Jar Bings</li>
</ul>

We want to disable the list-style and display the list and all it’s elements as inline-blocks’ in order to play ball with the rest of our sentence, if there is one.

Using pseudo-classes such as after, before and allows us to append or prepend some content to our items.

The entire ordeal is only necessary when we have multiple children which is why we captured everything in a :not(:only-child) block.

Now that we’re separated the lonely kids from the ones with siblings we need to ensure that the last child is always properly prefixed with the phrase and.

All other children, except the last two are postfixed with a comma. Note how d and e aren’t postfixed by anything in a, b, c, d and e. We basically accomplish that by eliminating the last child and the 2nd last child :not(:last-child):not(:nth-last-child(2)) and postfixing the rest with a comma.

The resulting css should look something like the following:

.authors {
  list-style: none;
  display: inline-block;
  .author {
    display: inline-block;

    &:not(:only-child) {
      &:last-child {
        &:before {
          content: " and ";
        }
      }
      &:not(:last-child):not(:nth-last-child(2)) {
        &:after{
          content: ',';
        }
      }
    }
  }
}

That’s all for now.

If you really must you can prefix the entire .authors block or the first author element with the string by but that is up to you.

I can hear you thinking… don’t be a lazy fart. Demo this sucker! Well here goes…