Aligning numbers inside an HTML Ordered List

This is the best I can come up with right now. It's a bit hacky, but it gets the job done 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 on JSFiddle

You could just add a margin before each bullet below #10, if you're willing to go the fixed widths route.

You shoud use:

list-style: decimal inside none;