Html 将列计数与：：before一起使用

在一个小实验中，我尝试使用

：：before

伪元素将列表中的默认项目符号替换为自定义项目符号。这在Chrome 50和Firefox 46中都适用

但当我尝试将其与

列计数相结合时，它会在Chrome中中断。不过，Firefox的显示与我的预期一致

那么这是我应该报告的Chrome中的一个bug（各自的闪烁），还是我错过了一些东西，Firefox刚好能够处理我的糟糕代码？



ul#测试{
-webkit列数：3；
-moz列数：3；
列数：3；
}
李{
列表样式类型：无；
}
李：以前{
内容：“*”；
宽度：0.7em；
高度：0.7em；
保证金权利：-0.7em；
显示：内联块；
位置：相对位置；
左：-1米；
背景颜色：蓝色；
}

一,
二,
三,
四,
五,
六,


一,
二,
三,
四,
五,
六,
我今天遇到了同样的问题，我的解决方案是简单地浮动：：before元素。除此之外，我还添加了一些方便的改进：



li{
列表样式类型：无；
左边距：1.5em；
线高：1.25em；
破门而入：避免；
}
李：以前{
内容：''；
宽度：0.7em；
高度：0.7em；
显示：块；
浮动：左；
保证金：0.5em 0-1.3em；
背景色：#BBB；
位置：相对位置；
顶部：.25em；
}
ul#与ColumCountandBefore{
-webkit列数：3；
-moz列数：3；
列数：3；
}
ul无列计数

一,
二,
三,
四,
五,
六,

ul带列计数（使用：before和float）

一,
2有一条很长的尾巴导致断线
三,
四,
五,
六,
在safari（桌面和iPad上）…有趣的是，：after似乎工作得更好，但仍然不完美（第一列有点被截断）：Da填充保留在li的位置，并且：after第一列的项目也完全可见。。。