Aligning numbers inside an HTML list

Question

I am trying to create an ordered numbered list where the background color alternates. I need the numbers to be displayed in the background and also lined up. If I post list-style-position:inside; , the numbers line up, but move beyond the background.

Here is 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/

Answer 1

This is the best I can think of right now. It's a bit hacky, but it does work on modern browsers.

 ol { list-style-type:decimal; margin-left:50px; } .alt { background-color:#ccc; position:relative; } .alt::before { position:absolute; display: inline-block; content:""; background-color: rgba(0,0,0,.2); left: -30px; height: 100%; width: 30px; }​ 

View in JSFiddle

Answer 2

You are using shoud:

 list-style: decimal inside none; 

Answer 3

You can simply add a margin in front of each mark below # 10 if you want to follow a fixed-width path.