Achieving Consistent Second Line Indentation in Ordered Lists with CSS

Problem Background and Challenges

In web typography, achieving proper indentation alignment in ordered lists presents a common yet challenging issue. When using list-style-position: inside, the second line of list items aligns with the marker rather than the first line of text, creating visual inconsistency. Conversely, list-style-position: outside causes the entire list to shift relative to superior text blocks, disrupting overall layout harmony.

Limitations of Traditional Approaches

Early solutions attempted to use properties like text-indent, padding-left, and margin-left to adjust indentation. However, these methods suffer from fundamental flaws in ordered lists. Since ordered list markers have variable widths (e.g., "1." vs "10."), fixed indentation values cannot guarantee perfect alignment with superior text blocks across all list items.

Modern Solution Using Table Layout

By leveraging the browser's table layout algorithm, we can achieve precise alignment without actually using HTML table elements. Here's the core implementation code:

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

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

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

This solution works through the following mechanisms:

• Setting the ordered list to display: table to inherit table layout characteristics
• Configuring each list item as display: table-row to simulate table rows
• Using ::before pseudo-element to generate markers as display: table-cell
• Employing text-align: right to ensure proper marker alignment

Browser Compatibility Considerations

For legacy browsers like IE8, the single-colon :before syntax is required. Modern browsers support the double-colon ::before syntax, and appropriate syntax selection should be based on target audience requirements.

Alternative Approaches

Reference solutions suggest display: flex as a viable alternative. When using pseudo-elements for custom icons, applying display: flex to the li element rather than the pseudo-element ensures correct text indentation and alignment.

Practical Implementation Example

Consider this typical typography scenario:

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
<ol>
    <li>Short text item</li>
    <li>This is a longer text item that requires line wrapping, where the second line should align with the first line text rather than the list marker</li>
    <li>Another short text item</li>
</ol>
<p>Subsequent text content should maintain consistent indentation with the list.</p>

After applying the CSS solution, all text lines maintain perfect alignment regardless of marker character count variations.

Best Practice Recommendations

In practical projects, we recommend:

• Selecting appropriate solutions based on project requirements, with table layout suitable for most scenarios
• Considering browser compatibility requirements and providing fallbacks when necessary
• Testing display effects across different screen sizes in responsive designs
• Integrating CSS preprocessors like Sass or Less for improved code maintainability

Conclusion

Through innovative CSS layout techniques, we can effectively resolve ordered list indentation alignment issues. The table-based solution provides a stable and reliable approach, while modern layout technologies like flexbox offer alternatives for specific use cases. Understanding the principles and applicable scenarios of these techniques enables developers to make more informed technical decisions in real-world projects.