Displaying comma separated values using CSS

Often you have render lists (names, or other entities) in a complete English sentence.

For example, Bangalore Chennai Delhi Mumbai

as Bangalore , Chennai , Delhi and Mumbai

The first bit of CSS, adds the "comma" between HTML elements with the class attribute "comma", which is the easy part.

The second and third help putting the "and" instead of comma between the second last and the last element.

.comma:not(:last-of-type):after {
  content: ",";
}
.comma:nth-last-of-type(2):before {
  content: none;
}
.comma:nth-last-of-type(2):after {
  content: " and ";
}

The HTML that it can style:

<div>
    <a href='#'>Bangalore</a>
    <aside class='comma'/>
    <a href='#'>Chennai</a>
    <aside class='comma'/>
    <a href='#'>Delhi</a>
    <aside class='comma'/>
    <a href='#'>Mumbai</a>
    <aside class='comma'/>
</div>

• Note the use of the extra HTML tag "aside", this is just to keep the styling on the href, isolated from the "," separator.

• The Tag could be aside or any other less commonly used HTML tag, just so that global CSS styling on a more common tag like <span> or <div> does not have side effects on the separator styling.