Why alignment mark list is different on WebKit when using :before height?

Question

Code: http://jsbin.com/maropaxivo/1/edit?html,css,output

See the sample code Firefox and Chrome browsers. Why alignment mark list is different?

Answer 1

So I investigated more into this issue:

1. Here is how it behaves now- note that the before is a block element while the content of li is inline.

li:before {
  height: 20px;
  content: " ";
  display: block;
  background-color: #ccc;
}

  

    
123
    
123
    
123
    
123
    
123
  

2. If I make both the items a block element by wrapping the text in a div, we have the same behaviour.

li:before {
  height: 20px;
  content: " ";
  display: block;
  background-color: #ccc;
}

  

    

      
123
    
    

      
123
    
    

      
123
    
    

      
123
    
    

      
123
    
  

3. If I change the before element to inline-block, we will finally see the same behavior in Firefox and Chrome:

li:before {
  height: 20px;
  content: " ";
  display: inline-block;
  width: 100%;
  background-color: #ccc;
}

  

    
123
    
123
    
123
    
123
    
123
  

4. If I change the before element to inline-block, and keep the content as block we will again see the same behavior in Firefox and Chrome:

li:before {
  height: 20px;
  content: " ";
  display: inline-block;
  width: 100%;
  background-color: #ccc;
}

  

    

      
123
    
    

      
123
    
    

      
123
    
    

      
123
    
    

      
123
    
  

Comments:

So whenever the before is inline-block (cases 3 and 4 above) or even inline for that matter, we see same behavior in Firefox and Chrome.

1. In Firefox, the numbers are aligned with the first inline element.

2. In Chrome, it doesn't matter even if it is a block element.

I strongly believe that this behavior is because there is a small difference in the user agent(browser) implementation of list-item display.

Conclusion:

Use inline-block and you won't face this discrepancy.

Let me know your feedback on this. Thanks!

EDIT:

So if you want it to look like the Firefox implementation of your code in both browsers, you can make the before absolute relative to the li:

li{
  position: relative;
  margin-top: 25px;
}
li:before {
  height: 20px;
  content: " ";
  display: block;
  width: 100%;
  background-color: #ccc;
  position:absolute;
  top: -20px;
}

  

    
123
    
123
    
123
    
123
    
123