CSS для циклирования через несколько изображений для украшения неупорядоченных списков

Я хочу заменить пулю на один из коллекции изображений

<ul>
    <li> List item 1 </li>
    <li> list item 2 </li>
    <li> List item 3 </li>
    <li> List item 4 </li>
</ul>

Я знаю, что можно определить изображение в css как часть атрибута list-style-image css:

ul{
list-style-image: url('/images/circle.jpg');
}

, но это относится к одному изображению ко всем пулям. То, что я хотел бы сделать, это предоставить последовательность изображений, и каждая пуля отобразит другое изображение из списка, в свою очередь, обертывая соответствующим образом.

Например, если я предоставил последовательность изображений ['red.jpg','amber.jpg','green.jpg'], если я применил это к неупорядоченному списку из 8 пуль, я бы хотел, чтобы он украшал эти элементы списка, используя изображения в последовательности [red, amber, green, red, amber, green, red, amber].

Есть ли способ стилирования <ul> или <li>, или мне нужно создать какую-то другую разметку, которая делает то же самое, просто не используя <ul> / <li>?

например что ближе всего я могу подойти к нижнему?

ul.traffic_lights {
list-style-image: [url('/images/red_circle.jpg', url('/images/amber_circle.jpg', url('/images/green_circle.jpg');
}