I am trying to create an ordered numbered list where the background color alternates. I need the numbers to appear inside the background, as well as line up. If I take out list-style-position:inside; the numbers line up, but move outside the background.

Here's my code, with a link to jsfiddle below.

<ol> <li>ha HA ha HA!</li> <li class="alt">ha HA ha HA!</li> <li>ha HA ha HA!</li> <li class="alt">ha HA ha HA!</li> <li>ha HA ha HA!</li> <li class="alt">ha HA ha HA!</li> <li>ha HA ha HA!</li> <li class="alt">ha HA ha HA!</li> <li>ha HA ha HA!</li> <li class="alt">ha HA ha HA!</li> <li>ha HA ha HA!</li> <li class="alt">ha HA ha HA!</li> <li>ha HA ha HA!</li> <li class="alt">ha HA ha HA!</li> <li>ha HA ha HA!</li> </ol> ol { list-style-type:decimal; list-style-position:inside; margin:1.5em; } .alt { background-color:#ccc; } 

http://jsfiddle.net/kwgpf/

I am trying to create an ordered numbered list where the background color alternates. I need the numbers to appear inside the background, as well as line up. If I take out list-style-position:inside; the numbers line up, but move outside the background.

Here's my code, with a link to jsfiddle below.

https://jsfiddle.net/kwgpf/

ol { list-style-type: decimal; list-style-position: inside; margin: 1.5em; } .alt { background-color: #ccc; }

<ol> <li>ha HA ha HA!</li> <li class="alt">ha HA ha HA!</li> <li>ha HA ha HA!</li> <li class="alt">ha HA ha HA!</li> <li>ha HA ha HA!</li> <li class="alt">ha HA ha HA!</li> <li>ha HA ha HA!</li> <li class="alt">ha HA ha HA!</li> <li>ha HA ha HA!</li> <li class="alt">ha HA ha HA!</li> <li>ha HA ha HA!</li> <li class="alt">ha HA ha HA!</li> <li>ha HA ha HA!</li> <li class="alt">ha HA ha HA!</li> <li>ha HA ha HA!</li> </ol>