Чтобы создать список, разделенный запятыми, достаточно присвоить всем элементам <li>
свойство display: inline;
и добавить запятую после каждого элемента в списке, кроме последнего, с помощью псевдоэлемента ::after
:
ul > li {
display: inline;
&:not(:last-child)::after {
content: ',';
}
}