How to make such separators in the menu, like Wildberries?

Question

Layout

Hello.
There is a task:
Make a menu like the vilberiz in the top Shop Vileberiz .
We need the same menu items with separators.
This template will be installed later on OpenCart.
What is special about this menu is that there is no separator at the beginning and no separator at the end of the menu, but this is solved (one way) by first- and last-child.
I looked at the wildberry code, where the implementation was made by adding additional li with content: "dot" properties.
The difficulty I had is this:
1. How to make these li-separators appear ONLY between menu items?
2. At the same time, these li-separators should NOT appear at the extreme menu elements (see the end of the first line of the menu on Wildberry and the beginning of the second line).
The peculiarity is that the template will be customized by the client through the admin panel, and the menu items can be overdone. Otherwise, it would be possible to make iron and that's it.
Regarding styling, then center all menu items in the container, and set a property for all elements so that they do not exit if the number of characters is large, but the entire li is transferred to a new line.
And how to solve the problem with separators? You can’t figure it out without js, but so far I can’t even figure out the principle and logic of implementation.
Help me please.
Thank you.

Answer 1

Answer 2

https://codepen.io/topicstarter/pen/qwyYMX like this

Answer 3

Try using a png background with a cutout. And the button through position: absolute. Give the parent position: relative

Answer 4

There something like this https://jsfiddle.net/jvsc4yoj/
Display always (in a php loop for example)
and so you can hide the last item https://jsfiddle.net/jvsc4yoj/1/ so as not to bother with php

Answer 5

I think to count the width of menu items + separators. If more than some value (i.e. a new line), do not add a separator accordingly.

Answer 6

https://codepen.io/one_day/pen/vJRvzm

Answer 7

so that the extreme elements of the menu do not have "dots" it is enough to do this

.element:last-child {
 list-style:none;
}

Answer 8

With wildberries, everything is much simpler, in pure css.
::after {
border-bottom: 1px dashed #ccc;
bottom: 5px;
content: '';
display:block;
height: 20px;
left: 0;
position: absolute;
width: 100%
}