Я ищу способ разработать незаказанный список в 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?
Это легко с CSS3, можно использовать псевдо селектор last-child
и not
сразу:
ul#taglist li:not(:last-child):after {
content: ", ";
}
Проверка заканчивается здесь https://jsfiddle.net/vpd4bnq1 /