Webkit Shows Bullet Behind Floated Elements In List

Have a look at this in firefox vs chrome, chrome will show the bullet after the floated span element. I'm not really sure what is happening here, seems the float is escaping the l

Solution 1:

As pointed out by @silviagreen this is a webkit-specific bug but as a workaround I suggest to add a transparent border to the list-item. This seems to properly work (but I honestly admit that I can't figure out why this should work)

li {
   border: 1px transparent solid;
}

https://jsfiddle.net/rjkz7ny1/

---

Other approaches suggest to change float: left into display: inline-block or to give clear: left to the list, but I feel these workarounds a bit too substantial (and not always appliable) than adding a trasparent border.

Solution 2:

A pseudo element, with a CSS counter for ol list can be used to avoid bug and use of borders

span {
  float: left;
  width: 200px;
}
ol {
  counter-reset:marker;
  }
li {
  counter-increment:marker;
  list-style-type:none;
  box-shadow:0 2px gray;
  }
li:before {
  content:'\02022 ';
  padding-right:0.25em;
  float:left;
  }
ol li:before {
  content:counter(marker)'. ';
  }
hr ~* li:before {
  text-indent:-1em;
  }
li:after {
  content:'';
  display:table;
  clear:both;

<ul>
  <li><span>test</span></li>
  <li><span>test</span></li>
</ul>
<ol>
  <li><span>test</span></li>
  <li><span>test</span></li>
</ol>
<hr/>
<ul>
  <li><span>test</span></li>
  <li><span>test</span></li>
</ul>
<ol>
  <li><span>test</span></li>
  <li><span>test</span></li>
</ol>