html带圈的数字号码,html – 带有数字的CSS圈子

有很多方法可以实现这一点.这是一个：

>创建一个列表(ul或ol)并删除列表样式(list-style：none;)

>初始化计数器：counter-reset：section;

>增加每个列表项的计数器并使用伪元素(：before)打印：content：counter(section);反增量：部分;

>像你想要的那样设置伪元素(：before)

ul {

counter-reset: section;

list-style: none;

}

li {

margin: 0 0 10px 0;

line-height: 40px;

}

li:before {

content: counter(section);

counter-increment: section;

display: inline-block;

width: 40px;

height: 40px;

margin: 0 20px 0 0;

border: 1px solid #ccc;

border-radius: 100%;

text-align: center;

}

• First item
• Second item

进一步阅读

演示