参见英文答案 >
html – CSS Counter Increment does not work3个
> Create line numbers on pre with CSS only3个
在我的HTML代码中,我定义了以下列表：
> Create line numbers on pre with CSS only3个
在我的HTML代码中,我定义了以下列表：
- <p class="list">first.</p>
- <p class="list">second.</p>
现在,我在css中：
- .list {
- display: table;
- }
- .list:before {
- display: table-cell;
- counter-increment: counter;
- content: counter(counter) '.';
- padding-right: 5px;
- }
并且页面上的结果是：
- 1. first
- 1. second
如何将第二个数字增加到2的值？
解决方法
您应该在列表的包装上使用counter-reset属性 – 请参阅下面的演示：
- body {
- counter-reset:counter;
- }
- .list {
- display: table;
- }
- .list:before {
- display: table-cell;
- counter-increment: counter;
- content: counter(counter) '.';
- padding-right: 5px;
- }
- <p class="list">first.</p>
- <p class="list">second.</p>
