HTML中有序列表标记的使用,html – 如何在使用start属性的有序列表中设置标记样式？...

您可以使用计数器重置和反增量属性.您必须在列表项上使用：before伪元素.

这是一个例子.

首先,你必须启动柜台.您可以使用counter-reset属性执行此操作.

ol {

counter-reset: item 49;

list-style: none;

}

计数器重置的语法如下

counter-reset: none|name number|initial|inherit;

在这里,我们给出了名称,然后是您想要开始的号码.由于默认情况下从0开始,因此您要选择49而不是50.

我们终于可以开始设计我们的数字,使它看起来很漂亮.我们使用：before伪元素执行此操作.在content属性中,我们可以包含我们使用上面的counter-reset属性定义的计数器的值.

li:before {

margin-right: 10px; // Gives us breathing room after number

padding: 3px;

content: counter(item);

background: lightblue;

border-radius: 100%; // Gives circle shape

color: white;

width: 1.2em;

text-align: center;

display: inline-block;

}

ol {

counter-reset: item 49;

list-style: none;

}

li {

counter-increment: item;

margin-bottom: 5px;

}

li:before {

margin-right: 10px;

padding: 3px;

content: counter(item);

background: lightblue;

border-radius: 100%;

color: white;

width: 1.2em;

text-align: center;

display: inline-block;

}

50. Coffee
51. Tea
52. Milk

还应注意,计数器重置和反增量仅适用于IE8或更高版本.