如何在 CSS 中使用数字和字母递增有序列表:
ol.nested {
margin-bottom: 0;
counter-reset: item;
}
ol.nested li {
display: block;
position: relative;
}
ol.nested li:before {
content: counters(item, ".", decimal) ".";
counter-increment: item;
position: absolute;
margin-right:100%;
right: 10px;
}Run Code Online (Sandbox Code Playgroud)
<ol class="nested">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ol class="nested">
<li>Show Item 3.a instead of 3.1</li>
<li>Show Item 3.b instead of 3.2</li>
<li>Show Item 3.c instead of 3.3</li>
</ol>
</li>
<li>Item 4
<ol class="nested">
<li>Show Item 4.a instead of 4.1</li>
<li>Show Item 4.b instead of 4.2</li> …Run Code Online (Sandbox Code Playgroud)