How to keep indent for second line in ordered lists via CSS?

I believe this will do what you are looking for.

.cssClass li {
  list-style-type: disc;
  list-style-position: inside;
  text-indent: -1em;
  padding-left: 1em;
}

JSFiddle: https://jsfiddle.net/dzbos70f/

The easiest and cleanest way, without any hacks, is to just to indent the ul (or ol), like so:

ol {
  padding-left: 40px; // Or whatever padding your font size needs
}

This gives the same result as the accepted answer: https://jsfiddle.net/5wxf2ayu/

Screenshot:

Update

This answer is outdated. You can do this a lot more simply, as pointed out in another answer below:

ul {
  list-style-position: outside;
}

See https://www.w3schools.com/cssref/pr_list-style-position.asp

Original Answer

I'm surprised to see this hasn't been solved yet. You can make use of the browser's table layout algorithm (without using tables) like this:

ol {
    counter-reset: foo;
    display: table;
}

ol > li {
    counter-increment: foo;
    display: table-row;
}

ol > li::before {
    content: counter(foo) ".";
    display: table-cell; /* aha! */
    text-align: right;
}

Demo: http://jsfiddle.net/4rnNK/1/

To make it work in IE8, use the legacy :before notation with one colon.