html - Using column-count together with ::before -

in small experiment tried replace default bullets in list custom ones using ::before pseudo-element. works in both chrome 50 firefox 46.

but when try combine column-count breaks in chrome. firefox, however, displays intended it.

so bug in chrome (respective blink) should report or did miss here , firefox able deal crappy code?

fiddle

ul#test {    -webkit-column-count: 3;    -moz-column-count: 3;    column-count: 3;  }  li {    list-style-type: none;  }  li::before {    content: '*';    width: 0.7em;    height: 0.7em;    margin-right: -0.7em;    display: inline-block;    position: relative;    left: -1em;    background-color: blue;  }

<ul>    <li>1</li>    <li>2</li>    <li>3</li>    <li>4</li>    <li>5</li>    <li>6</li>  </ul>  <ul id="test">    <li>1</li>    <li>2</li>    <li>3</li>    <li>4</li>    <li>5</li>    <li>6</li>  </ul>

i ran same problem today , solution float ::before-element. beside added handy improvements:

fiddle

li {    list-style-type: none;    margin-left: 1.5em;    line-height: 1.25em;    break-inside: avoid;  }  li:before {    content: '';    width: 0.7em;    height: 0.7em;    display: block;    float: left;    margin: 0 .5em 0 -1.3em;    background-color: #bbb;    position: relative;    top: .25em;  }    ul#withcolumcountandbefore {    -webkit-column-count: 3;    -moz-column-count: 3;    column-count: 3;  }

<h2>ul without column count</h2>  <ul>    <li>1</li>    <li>2</li>    <li>3</li>    <li>4</li>    <li>5</li>    <li>6</li>  </ul>  <h2>ul column count (using :before , float)</h2>  <ul id="withcolumcountandbefore">    <li>1</li>    <li>2 long tail cause line break</li>    <li>3</li>    <li>4</li>    <li>5</li>    <li>6</li>  </ul>