Using column-count together with ::before

Question

In a small experiment I tried to replace the default bullets in a list by custom ones using a ::before pseudo-element. This works in both Chrome 50 as well as Firefox 46.

But when I try to combine that with column-count it breaks in Chrome. Firefox, however, displays like I intended it.

So is this a bug in Chrome (respective Blink) I should report or did I miss something here and Firefox is just able to deal with my 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>

funnily enough, :after seems to work better but still not perfect (first column is a bit cut off) https://jsfiddle.net/nerdess/an2xgo1p/2/ :D — nerdess, Aug 24 '16 at 12:31
a padding-left to the li's and the :after-items of the first column are fully visible too... — nerdess, Aug 24 '16 at 12:37

Felix Geenen · Answer 1 · 2017-07-05T16:57:36.607

I ran into the same problem today and my solution is to simply float the ::before-Element. Beside that I added some 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 with column count (using :before and float)</h2>
<ul id="withColumCountAndBefore">
  <li>1</li>
  <li>2 with a very long tail to cause a line break</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

Using column-count together with ::before

1 Answers1