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

html

css-variables

css-animation

responsive-design

byAnton Shumikhin·Jan 16, 2025

Aligning the second line in ordered lists can be implemented by manipulating CSS properties. Applying list-style-position: inside; to the <ol> element ensures list markers positioning inside. On the <li> element, utilize padding-left to establish an indent, and text-indent with a negative value to perfectly align consecutive lines:

ol {
  list-style-position: inside;
  padding-left: 30px; /* Yet another magic number! */
}

li {
  text-indent: -30px; /* The counter magic to padding-left */
}

This CSS recipe ensures multiline list items receive consistent indentation, concocting a clear, organized aesthetic for your content.

Customized list numbering and alignment

Custom numbering with counters

Deliver an extra punch of stylization and uniformity across your lists with CSS counters. The counter-reset and counter-increment properties give you the reins over numbering, ensuring indentation remains unaltered across nested lists:

ol {
  counter-reset: list-counter; /* Resets the counter */
}

li {
  counter-increment: list-counter; /* Increments the counter */
  list-style-type: none; /* Hides the default numbering */
}

li:before {
  content: counter(list-counter) ". "; /* Append the counter before each item */
  text-align: right; /* Aligns counter to the right */
  margin-right: 5px; /* A bit of breathing space between the counter and list content */
}

Now you are the counter wizard, behold the power!

Right alignment for prolonged consistency

Gain prolonged alignment consistency across your lists, especially dealing with variable number lengths. Apply text-align: right; alongside display: table-cell; to form a stylish look with right-aligned numbering:

li {
  display: table-cell; /* Trick to obtain a table-cell-like behavior */
  text-align: right; /* Aligns content to the right */
  padding-right: 10px; /* Prevents numbers sticking to the text */
}

Old is gold: IE8 compatibility

Ensure oldies-but-goldies like IE8 don't feel left out by using the :before pseudo-element. With the addition of list-style: none; on <ol>, the second-line indentation remains consistent on these browsers:

ol {
  list-style: none; /* Goodbye bullets */
}

li:before {
  content: counter(list-counter) "."; /* Manually insert numbers */
  counter-increment: list-counter; /* Counter activation */
  /* Further stylization to make IE8 smile */
}

Welcome to the vintage club, stylist!

Advancing with flexbox/grid

Looking to up the ante? Use Flexbox or Grid for aligning list items. These modern layout methods introduce dynamic and responsive list styling:

ol {
  display: flex;
  flex-direction: column; /* Stacks list items vertically */
}

li {
  display: flex; /* Prepare for some flexible action */
}

Each list, now a perfectly aligned gymnast!

Power of CSS variables

Round up your stylists and introduce CSS variables, streamlining your list styles:

:root {
  --indent-size: 30px; /* Create a CSS variable */
}

ol {
  padding-left: var(--indent-size); /* Use the CSS variable */
}
li {
  text-indent: calc(var(--indent-size) * -1); /* Counteract the indents, keep the lines straight */
}

A bit of CSS magic, and your lists are donning a uniform style!

Animated lists

Tease the user interaction with a subtle sprinkle of CSS animation or transition:

li {
  transition: transform 0.3s ease; /* Ready to make a li move */
}

li:hover {
  transform: translateX(10px); /* A bit of horizontal hover action */
}