How to Add Indentation for the Second Line of an Ordered List

Solution with CSS properties

You can use the table layout algorithm of the browser without using a table like the following.

In the example below, we set the display of the <ol> element to "table" and add the counter-reset property. Then, we set the display of the <li> elements to "table-row" and also use the list-style and counter-increment properties.

Finally, we add the ::before pseudo-element to <li> elements and style it by setting the display to "table-cell" and specifying the text-align and padding-right properties.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Example of adding indent for the second line of the ordered list:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ol,
      li {
        margin: 0;
        padding: 0;
      }
      ol {
        counter-reset: list;
        display: table;
      }
      li {
        list-style: none;
        counter-increment: list;
        display: table-row;
      }
      li::before {
        content: counter(list) ".";
        display: table-cell;
        text-align: right;
        padding-right: 1em;
      }
    </style>
  </head>
  <body>
    <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
        when an unknown printer took a galley of type and scrambled it to
        make a type specimen book.
    </p>
    <ol>
      <li>
        It has survived not only five centuries, but also the leap into electronic
        typesetting, remaining essentially unchanged.
      </li>
      <li>
        It was popularised in the 1960s with the release of Letraset sheets 
        containing Lorem Ipsum passages, and more recently with desktop 
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </li>
      <li>
        It is a long established fact that a reader will be distracted 
        by the readable content of a page when looking at its layout.
      </li>
      <li>
        There are many variations of passages of Lorem Ipsum available, 
        but the majority have suffered alteration in some form, by injected 
        humour, or randomised words which don't look even slightly believable.
      </li>
      <li>
        All the Lorem Ipsum generators on the Internet tend to repeat
        predefined chunks as necessary, making this the first 
        true generator on the Internet.
      </li>
    </ol>
  </body>
</html>

Result

  1. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
  2. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  3. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
  4. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.