JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="byline-list">
       <li>Adam Smith</li>
      </ul>
      <ul class="byline-list">
       <li>Adam Smith</li><li>Jane Doe</li>
      </ul>
      <ul class="byline-list">
       <li>Adam Smith</li><li>Jane Doe</li><li>Frank Underwood</li>
      </ul>

CSS

.byline-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.byline-list > li {
  display: inline;
  padding: 0;
  margin: 0;
}
.byline-list > li::before {
  content: ", ";
}
.byline-list > li:last-child::before {
  content: ", and ";
}
.byline-list > li:first-child + li:last-child::before {
  content: " and ";
}
.byline-list > li:first-child::before {
  content: "By ";
}
.byline-list > li:last-child::after {
  content: ".";
}