Here is an example illustrating how to achieve the desired outcome using <ol> (ordered lists) and CSS with counters. The method may seem a bit unconventional due to the need for proper alignment when lines wrap around, but it proves to be more efficient than manual numbering or table usage.
To ensure consistent spacing between the numbers and text, set a specific width for the li:before pseudo-element and style it as display: inline-block. Adjust the width, margin-left, and
padding-left</code values accordingly for optimal styling.</p>
<p>CSS Counters enjoy decent <a href="http://caniuse.com/#search=counter" rel="nofollow"><strong>browser support</strong></a>.</p>
<p><div>
<div>
<pre class="snippet-code-css lang-css"><code>.level1, .level2, .level3 {
list-style-type: none;
}
.level1 {
counter-reset: level1; /* initializing first-level counter */
}
.level2 {
counter-reset: level2; /* initializing second-level counter */
}
.level3 {
counter-reset: level3; /* initializing third-level counter */
}
li {
display: block;
}
li:not(:last-child):after, li > ol:before{
content: " ";
display: block;
position: relative;
height: 20px; /* placeholder for required line height */
left: 0px; top: 100%;
}
.level1, .level2, .level3 {
margin: 0;
padding: 0;
}
.level1 > li, .level3 > li {
padding-left: 40px;
}
li:before {
margin-left: -40px;
width: 40px;
display: inline-block;
}
.level1 > li{
font-weight: bold;
}
.level1 > li:before, .level1 > li * {
font-weight: normal;
}
.level1 > li:before {
content: counter(level1)"."; /* display current item number + dot */
counter-increment: level1;
}
.level2 > li:before {
content: counter(level1)"." counter(level2); /* format level 1 counter + dot + level 2 counter */
counter-increment: level2;
}
.level3 > li:before {
content: "(" counter(level3, lower-latin)") "; /* format ( + level3 counter + ) */
counter-increment: level3;
}
<ol class='level1'>
<li>one
<ol class='level2'>
<li>one dot one - lengthy text that wraps around.</li>
<li>one dot two
<ol class='level3'>
<li>A</li>
<li>B - lengthy text wrapping onto next line.</li>
</ol>
</li>
</ol>
</li>
<li>two - lengthy text wrapping to next line.</li>
</ol>