Css 宽度可变的弹性项之间的等距分隔符

我需要设计一个由CMS动态呈现的导航（因此我无法控制HTML标记）。菜单中的项目数量未知，且所有项目的宽度未知。我需要把这些菜单项排成一行，中间有一个等距的间距（很容易用Frasbox完成），并且在间隔的中间有一个可视的分隔符（这是我的未解决的问题）。 下面是到目前为止我得到的代码。HTML只是一个示例输出，我无法修改它。我也不允许使用JS。CSS来自我自己，我可以完全控制它

.mainnav{
宽度：100%；
显示器：flex；
证明内容：之间的空间；
列表样式类型：无；
保证金：0；
填充：0；
边框：1px纯黑；
}
.mainnav\u项目{
flex:0自动；
背景颜色：黄色；
位置：相对位置；
空白：nowrap；
}
.mainnav\uuuu项目+.mainnav\uuuu项目：：之前{
内容：''；
宽度：1px；
身高：100%；
背景色：红色；
位置：绝对位置；
左-50%；
排名：0；
}

<>代码>一个想法是考虑<代码>显示：内容；
1在
li
元素内，并保持伪元素流动（删除
位置：绝对
）。这将使伪元素和
a
成为弹性项，而不是
li
元素，因此
之间的空格将起作用

只需注意，因为这是一个新功能


.mainnav{
宽度：100%；
显示器：flex；
证明内容：之间的空间；
列表样式类型：无；
保证金：0；
填充：0；
边框：1px纯黑；
}
.mainnav\u项目{
flex:0自动；
位置：相对位置；
空白：nowrap；
显示：内容；
}
.mainnav_uu项目a{
背景：黄色；
}
.mainnav\uuuu项目+.mainnav\uuuu项目：：之前{
内容：''；
宽度：1px；
显示：块；
背景色：红色；
}









这是一个非常好且简单的解决方案，但我必须支持IE11：-(