小编zim*_*mny的帖子

如何在有序列表中组合数字和字母?

如何在 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)

html css css-counter

4
推荐指数
1
解决办法
2840
查看次数

标签 统计

css ×1

css-counter ×1

html ×1