Как разработать незаказанный списки в CSS, поскольку запятая разделила текст

Я ищу способ разработать незаказанный список в XHTML с CSS, таким образом, что он представляется встроенный, и элементы списка разделяются запятыми.

Например, следующий список должен быть представлен как apple, orange, banana (отметьте недостающую запятую в конце списка).

<ul id="taglist">
  <li>apple</li>
  <li>orange</li>
  <li>banana</li>
</ul>

В настоящее время я использую следующий CSS для моделирования этого списка, который почти делает то, что я хочу, но представляет список как apple, orange, banana, (отметьте запаздывающую запятую после банана).

#taglist {
  display: inline;
  list-style: none;
}

#taglist li {
  display: inline;
}

#taglist li:after {
  content: ", ";
}

Существует ли способ решить эту проблему с чистым CSS?

62
задан 14 August 2014 в 23:32

1 ответ

Это легко с CSS3, можно использовать псевдо селектор last-child и not сразу:

ul#taglist li:not(:last-child):after {
    content: ", ";
}

Проверка заканчивается здесь https://jsfiddle.net/vpd4bnq1 /

11
ответ дан 31 October 2019 в 14:04

Другие вопросы по тегам:

Похожие вопросы: